leumas-universal-crud-react/src/styles/tailwindStyles.js

Leumas Universal CRUD to a dynamic Endpoint, Setup your own Dynamic Endpoint and Use Leumas API to send to your MONGO clusters

export const popupAsideCSS = " text-white w-full md:h-full h-24 md:w-64 h-full p-4 md:overflow-y-scroll rounded-b-lg rounded-r-lg shadow-xl overflow-y-auto border-glow z-50 ";

export const popupParent = "relative flex md:flex-row h-full overflow-x-scroll md:overflow-y-hidden";

export const scrollbar = "futuristic-scrollbar"

export const glassmorphic = "bg-white bg-opacity-40 backdrop-blur-md rounded-lg border border-gray-200 shadow-lg";

export const glassInput = "bg-white bg-opacity-20 backdrop-blur-md border border-gray-200 p-2 rounded-md w-full focus:outline-none focus:ring-2 focus:ring-blue-400";

export const glassButton = "bg-white bg-opacity-20 backdrop-blur-md border border-gray-200 p-2 rounded-md shadow-lg transform transition-transform duration-300 hover:border-blue-500 active:scale-95 active:shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400";

export const JSONBOXXS = `max-w-xs max-h-48 border rounded-lg border-black overflow-y-scroll overflow-x-scroll`

export const flexCenterContainer = "min-h-screen py-6 flex flex-col justify-center sm:py-12 text-black";

export const maxWContainer = "relative sm:max-w-xl sm:mx-auto";

export const gradientSkewBg = "absolute inset-0 bg-gradient-to-r from-cyan-400 to-light-blue-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl";

export const roundedShadowBox = "relative px-4 py-10 shadow-lg sm:rounded-3xl sm:p-20";

export const centeredContentBox = "max-w-md mx-auto";

export const styledInput = "mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0 p-1";

export const indigoButton = "w-full px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-400 hover:bg-blue-700";

export const blueGreenButton = "mr-2 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-500 hover:bg-green-600";

export const blackYellowButton = "px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-black hover:bg-yellow-600";

export const previewIframe = "mt-2 w-full bg-white rounded-md shadow p-4";

export const codeTextarea = "mt-2 w-full p-2 rounded-md shadow-inner text-sm";

export const containerStyles = "rounded-lg shadow-xl";

export const buttonStyles = "p-2 bg-blue-500 rounded-lg text-white hover:bg-black";

export const textStyles = "text-xs bg-transparent shadow-xl p-2 rounded-lg";

export const iconButtonStyles = "p-2 bg-transparent hover:bg-blue-200 rounded-lg";

export const button1Styles=`border-2 flex p-2 rounded-xl items-center justify-center text-xs bg-blue-500 hover:bg-blue-700`

export const buttonClasses = 'text-xs md:text-base px-2 py-1 rounded-md focus:outline-none active:outline-none transition-colors duration-200 ease-in hover:bg-opacity-90';





export const classes = {
    title: "text-xl font-bold mb-4",
    formElement: "mb-4",
    select: "border rounded p-2 w-full bg-transparent",
    input: "border rounded p-2 w-full bg-transparent",
    button: "bg-blue-500 text-white p-2 rounded mr-2 hover:bg-blue-600 active:bg-blue-700 focus:outline-none",
    secondaryButton: "bg-gray-300 text-black p-2 rounded mr-2 hover:bg-gray-400 active:bg-gray-500 focus:outline-none",
    card: "relative p-4 m-2 w-full hover:shadow-xl cursor-pointer bg-opacity-30 bg-white rounded-xl backdrop-blur-md",
    cardSelected: "ring ring-blue-500",
    cardGlowBlue: "ring-blue-500 ring-2",
    cardGlowRed: "ring-red-500 ring-2",
    infoIcon: "text-gray-500 hover:text-blue-500 cursor-pointer",
    tooltip: "opacity-0 group-hover:opacity-100 absolute right-0 top-full mt-2 w-56 p-2 bg-gray-800 text-white rounded-xl shadow-lg transition-opacity duration-300 backdrop-blur-md",
    cardImage: "h-48 w-48 mx-auto rounded-lg",
    cardTitle: "text-center mt-4 text-lg font-semibold",
    cardContainer: "bg-opacity-30 p-8 rounded-xl w-full shadow-xl backdrop-blur-md",
    formLabel: "block mb-2",
    selectInput: "w-full p-2 rounded border border-gray-300 focus:outline-none focus:border-indigo-500 text-black",
    primaryButton: "bg-indigo-500 text-white px-4 py-2 rounded hover:bg-indigo-600 transition-all",
    sectionTitle: "text-xl font-semibold mb-4",
    buttonStyle : `
    bg-indigo-500 text-white p-3 rounded-md hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-400 active:bg-indigo-700 transition duration-150 ease-in-out shadow-md w-32
    `
  };

  export const checkboxStyle = `
  form-checkbox text-indigo-600 transition duration-150 ease-in-out hover:text-indigo-500 focus:outline-none focus:shadow-outline-indigo active:text-gray-800
`;

export   const styledInput2 = `
bg-white border rounded-md shadow-sm w-full p-3 transition duration-150 ease-in-out hover:border-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-gray-50 active:text-gray-800 placeholder-gray-500 text-gray-900
`;


export const buttonStyle = `
bg-indigo-500 text-white p-3 rounded-md hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-400 active:bg-indigo-700 transition duration-150 ease-in-out shadow-md w-32
`
export const gradientBackground = `absolute inset-0 bg-gradient-to-r from-blue-200 to-transparent blur-opacity-50 blur-md`




// Neuromorphic Era

export const neuromorphicButtonStyles = "rounded-full p-2 bg-transparent transition duration-500 ease-in-out transform hover:scale-105 hover:-translate-y-1 hover:text-electric-blue hover:shadow-lg active:translate-y-0 active:scale-100 focus:outline-none shadow-neuromorphic-blue text-current fill-current";



export const neuromorphicIconStyles = "text-current fill-current transition-colors duration-500 ease-in-out hover:text-electric-blue focus:outline-none";

export const neuromorphicButton = "bg-neutral-200 p-2 rounded-md text-xs transition-transform duration-200 transform hover:-translate-y-0.5 hover:shadow-md active:translate-y-0 focus:outline-none shadow-sm text-current fill-current transition-colors duration-500 ease-in-out hover:text-electric-blue focus:outline-none";


export const neuromorphicInput = "bg-neutral-200 p-2 rounded-md text-xs focus:outline-none shadow-sm focus:shadow-md w-16";
export const neuromorphicInput2 = "bg-neutral-200 p-2 rounded-md text-xs focus:outline-none shadow-sm focus:shadow-md w-full";

export const btnStyle = `${neuromorphicButton} flex items-center space-x-1`;
export const selectStyle = `${neuromorphicInput}`;
export const groupedContainerStyle = "flex-1 flex items-center border border-gray-300 border-glow"; // `flex-1` added to ensure each fieldset take equal width




export const blueGrayGradient = `bg-gradient-to-br from-blue-500 to-gray-300`

export const neuromorphicFileInput = ``

export const neuromorphicTextInput = ``




// Block Stuff

export const selectedBlockInput="col-span-3 md:col-span-1 w-full text-sm border border-neutral-200 bg-white rounded-lg shadow-sm p-2 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"


export const color1 = " ";
export const color2 = " ";
export const color3 = "";