Tailwind CSS-based design that includes custom button styles, gradient effects, and utility classes.

The code you provided appears to be a Tailwind CSS-based design that includes custom button styles, gradient effects, and utility classes. I'll break down what each part of the code is doing:

Tailwind Directives:

@tailwind base;
@tailwind components;
@tailwind utilities;
  • These are Tailwind CSS directives that import the base styles, components, and utility classes into your stylesheet. It allows you to use Tailwind's utility-first classes like text-lg, bg-gradient, h-48, etc.

Button Styles (.btn):


.btn {
    background: linear-gradient(
      92.23deg,
      #ff56f6 21.43%,
      #b936ee 50.63%,
      #3bace2 100%,
      #406aff 117.04%
    );
    box-shadow: 0px 4.42184px 107.23px rgba(255, 86, 246, 0.51);
  }

  • This section defines a custom button class .btn. It applies a linear gradient background with specific color stops, creating a smooth gradient effect from pink to blue shades.
  • The box-shadow adds a glowing effect with a soft shadow in the rgba color format (rgba(255, 86, 246, 0.51)), which matches the pink color in the gradient.

Button Hover State:


.btn:hover {
  background: linear-gradient(
    92.23deg,
    #406aff 21.43%,
    #3bace2 50.63%,
    #b936ee 100%,
    #ff56f6 117.04%
  );
}

  • This defines the hover state for the .btn class. When the user hovers over the button, the gradient colors reverse order to create a visually engaging effect.

Gradient and Active Class:


.gradient,
.active {
  background: linear-gradient(
    92.23deg,
    #406aff 21.43%,
    #3bace2 50.63%,
    #b936ee 100%,
    #ff56f6 117.04%
  );
}

  • Both .gradient and .active classes are styled with the same linear gradient as the button, which gives them a similar color effect.

    .active {
        color: #fff;
        padding: 1rem;
        border-radius: 100%;
    }

  • .active adds white text color (color: #fff), padding around the content, and a fully rounded border (border-radius: 100%), which makes it appear as a circular button or element.

Base Layer (@layer base):


    @layer base {
        body {
            @apply font-secondary text-lg leading-8 text-white;
        }

        .h2 {
            @apply font-primary text-[32px] mb-6 tracking-[10%] uppercase;
        }

        .h3 {
            @apply font-primary font-semibold text-[26px] mb-6 leading-[46px];
        }

        .btn {
            @apply rounded-full font-primary text-white font-medium;
        }

        .btn-sm {
            @apply h-[48px] px-6 text-sm;
        }

        .btn-lg {
            @apply h-[56px] px-10 text-base;
        }

        .btn-link {
            @apply text-base;
        }

        .text-gradient {
            @apply bg-gradient-to-r text-transparent bg-clip-text from-[#42A6E3] to-[#FF56F6] font-bold font-primary hover:from-[#FF56F6] hover:to-[#42A6E3];
        }

        .section {
            @apply py-8 lg:py-24 lg:h-screen flex items-center;
        }
    }

  • This section leverages the @apply directive of Tailwind CSS to apply utility classes directly in custom CSS.
  • Body styling: Sets the default font (font-secondary), size (text-lg), line height (leading-8), and color (text-white).
  • Heading styles: Defines the styles for .h2 and .h3 with specific font properties, size, margin, and text tracking.
  • Button variants: It creates variants like .btn-sm, .btn-lg, and .btn-link, which change the size and font of the buttons, providing flexibility for different contexts.
  • Text Gradient: The .text-gradient class applies a gradient text effect with bg-clip-text, making the text color transition from one gradient to another. It also defines hover behavior.
  • Section styling: The .section class defines padding (py-8 and lg:py-24) and flexbox settings to vertically center the content.

Summary:

This code provides a visually engaging design using Tailwind CSS utilities and custom gradient styles. You have a flexible button component that features gradient backgrounds and glowing effects, as well as utility classes that enable responsive design, typography, and spacing.

To make use of this code:

  1. Ensure that Tailwind CSS is properly set up in your project.
  2. You can then use these custom classes in your HTML to style elements like buttons, sections, headings, and more.

Let me know if you'd like further clarification or help with implementing this in your project!

Comments

Post a Comment

Popular posts from this blog

Lets build a Markdown blog using Next.js, Shadcn, Tailwind, Pieces, Remark & Rehype 🔥

 Building a Markdown blog using **Next.js**, **Shadcn**, **Tailwind CSS**, **Pieces**, **Remark**, and **Rehype** is a fantastic idea! This stack will give you a modern, performant, and highly customizable blog. Let’s break it down step by step. --- ### **1. Set Up Next.js Project** Start by creating a new Next.js project: ```bash npx create-next-app@latest my-markdown-blog cd my-markdown-blog ``` --- ### **2. Install Tailwind CSS** Install Tailwind CSS and configure it: ```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` Update `tailwind.config.js`: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = {   content: [     "./app/**/*.{js,ts,jsx,tsx}",     "./pages/**/*.{js,ts,jsx,tsx}",     "./components/**/*.{js,ts,jsx,tsx}",   ],   theme: {     extend: {},   },   plugins: [], }; ``` Add Tailwind to your `globals.css`: ```css @tailwind base; @tailwind components; @...
Read more

React Portflio Website Basic to Advance

To build a React-based portfolio website with Tailwind CSS, follow these steps to integrate Tailwind and style your components. 1. Set Up Tailwind CSS in Your React Project First, create a new React project and install Tailwind CSS.   npx create-react-app portfolio-website  cd portfolio-website  npm install -D tailwindcss postcss autoprefixer  npx tailwindcss init After running ,    npx tailwindcss init   a    tailwind.config.js  file will be created. Now, configure Tailwind to purge unused styles by editing tailwind.config.js as follows: tailwind.config.js /** @type {import('tailwindcss').Config} */ module . exports = {   content : [     " ./src/**/*.{js,jsx,ts,tsx} " ,   ],   theme : {     extend : {},   },   plugins : [], } 2. Add Tailwind Directives to CSS Create a new file  src / index .css   (or edit the existing one) to include the Tailwind directives: sr...
Read more

Todo List app using html,js and tailwind.css with features login,logout,storing the data in localstorage addtodos,deletetodos and updating todos,toastify library and many more

Image
  Here's a fully functional To-Do List app with login/logout functionality, item management (add, edit, delete), and local storage for data persistence. The app uses HTML, CSS (with Tailwind CSS for design), and JavaScript for the logic. File Structure: index.html - The main structure of the app style.css - Custom styles (if needed) script.js - JavaScript logic for the app You can use Tailwind CSS CDN for simplicity to quickly apply beautiful styles. Features Breakdown: Login/Logout : The user can log in by entering a username and password. After logging in, they can manage their to-do list. If not logged in, they are redirected to the login screen. To-Do Management : The user can add, edit, and delete items from the to-do list. Local Storage : All data is stored in the browser's local storage, so the data persists even after the page is refreshed. Tailwind CSS : The app uses Tailwind CSS to create a clean, responsive, and modern design. You can run this code by creating th...
Read more