leumas-private-shared/src/styles/tailwindStyles.js

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

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 = "";