Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to create Glowing Neon Cursor using HTML CSS and JS

    2 August 2025

    How to create Solar System Explorer using HTML and CSS

    31 July 2025

    How to create Animated 404 Page not found using HTML and CSS

    29 July 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - HTML & CSS - How to make Glassy Profile Card using HTML & TAILWIND
    HTML & CSS

    How to make Glassy Profile Card using HTML & TAILWIND

    Coding StellaBy Coding Stella28 June 2024No Comments5 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Let’s create a Glassy Profile Card using HTML and Tailwind CSS. This project will feature a modern, glass-like effect for a profile card, making it visually appealing and stylish.

    We’ll use HTML to structure the profile card and Tailwind CSS for styling, utilizing its utility-first approach to achieve the glassy effect and responsive design.

    Let’s get started on building the Glassy Profile Card. Whether you’re a beginner or an experienced developer, this project offers a great way to practice your web development skills and create a sleek, modern design. Let’s dive in!

    HTML & TAILWIND :

    This HTML and Tailwind CSS code creates a “Glassy Profile” card with a neon glow effect. The card displays a user profile with a picture, name, and location, and includes interactive toggles. One toggle reveals additional details like the user’s role and social media icons, while another shows detailed content about the user in an overlay panel. The card uses Tailwind CSS classes for styling and animations, providing a visually appealing and interactive user profile component.

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>[Tailwind] Glassy Profile</title>
      <script src="https://cdn.tailwindcss.com"></script>
        <link rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    
    </head>
    <body>
    <!-- partial:index.partial.html -->
    <body class="bg-gradient-to-t from-blue-950 to-blue-900  text-[#101232] flex justify-center items-center min-h-screen">
      <h1 class="sr-only">Glassy Profile</h1>
      <input type="checkbox" id="data" class="sr-only peer/data"  role="switch" aria-label="Data Toggle">
      <input type="checkbox" id="content" class="sr-only peer/content"  role="switch" aria-label="Content Toggle">
      <div class="z-10 rounded-xl overflow-hiddenS group relative
            before:absolute
            before:w-32
            before:aspect-square
            before:rounded-full
            before:bg-blue-600
            before:blur-lg 
            before:right-3
            before:top-0
            before:-z-10
    
            after:absolute
            after:w-32
            after:aspect-square
            after:rounded-full
            after:bg-teal-300
            after:blur-lg 
            after:left-4
            after:bottom-0
            after:-z-10
    
            peer-checked/data:first:[&_#toggle-data>span]:scale-0
            peer-checked/data:last:[&_#toggle-data>span]:scale-100
    
            peer-checked/data:[&_#panel-data]:-translate-y-14
            peer-checked/data:[&_#panel-social]:translate-y-12
    
            peer-checked/content:[&_#panel-content]:opacity-100
            peer-checked/content:[&_#panel-content]:pointer-events-auto
           ">
        <div class="relative bg-white rounded-xl bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-70 w-60 p-8 text-center">
          <img src="https://i.pravatar.cc/120?img=26" class="rounded-full mx-auto w-20 h-20 border-4 border-white/70  opacity-70 group-hover:opacity-100  transition">
    
          <h3 class="font-bold mt-6">Mary Jane</h3>
          <p class="flex items-center justify-center gap-1 text-sm">
            <span class="material-symbols-outlined text-lg">location_on</span>
            Atlanta, GA
          </p>
    
          <label for="content" class="block mt-4 cursor-pointer  text-xs rounded-full p-2 px-3 bg-[#101232] text-white transition hover:shadow-xl hover:scale-110">View Content</label>
    
        </div>
    
        <label id="toggle-data" for="data" class="grid [grid-template-areas:'stack'] place-content-center absolute top-4 right-4 cursor-pointer hover:scale-150 transition 
                *:[grid-area:stack]
                *:transition-all
                *:duration-300
                *:text-sm
                last:*:scale-0
            ">
          <span class="material-symbols-outlined">density_large</span>
          <span class="material-symbols-outlined">close</span>
        </label>
    
        <div id="panel-data" class="absolute -top-4 left-8 right-8 w-8/10 h-40  -z-20 bg-[#101232] rounded-t-md text-white p-6 pt-4 transition duration-300">
          <p>UI designer</p>
          <a href="#">@mary</a>
        </div>
    
        <div id="panel-social" class="absolute transition duration-300 -bottom-4 left-8 right-8 p-6 pb-2 w-8/10 h-20 -z-20 bg-[#101232] text-white rounded-b-md flex items-center justify-between gap-2 [&>svg]:cursor-pointer [&>svg]:w-5 [&>svg]:h-5 [&>svg:hover]:scale-125 [&>svg]:transition">
          <svg viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M14.058 3.41c-1.807 .767 -2.995 2.453 -3.056 4.38l-.002 .182l-.243 -.023c-2.392 -.269 -4.498 -1.512 -5.944 -3.531a1 1 0 0 0 -1.685 .092l-.097 .186l-.049 .099c-.719 1.485 -1.19 3.29 -1.017 5.203l.03 .273c.283 2.263 1.5 4.215 3.779 5.679l.173 .107l-.081 .043c-1.315 .663 -2.518 .952 -3.827 .9c-1.056 -.04 -1.446 1.372 -.518 1.878c3.598 1.961 7.461 2.566 10.792 1.6c4.06 -1.18 7.152 -4.223 8.335 -8.433l.127 -.495c.238 -.993 .372 -2.006 .401 -3.024l.003 -.332l.393 -.779l.44 -.862l.214 -.434l.118 -.247c.265 -.565 .456 -1.033 .574 -1.43l.014 -.056l.008 -.018c.22 -.593 -.166 -1.358 -.941 -1.358l-.122 .007a.997 .997 0 0 0 -.231 .057l-.086 .038a7.46 7.46 0 0 1 -.88 .36l-.356 .115l-.271 .08l-.772 .214c-1.336 -1.118 -3.144 -1.254 -5.012 -.554l-.211 .084z" stroke-width="0" fill="currentColor"></path>
          </svg>
    
          <svg viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
            <path d="M8 11l0 5"></path>
            <path d="M8 8l0 .01"></path>
            <path d="M12 16l0 -5"></path>
            <path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
          </svg>
    
          <svg viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M18 2a1 1 0 0 1 .993 .883l.007 .117v4a1 1 0 0 1 -.883 .993l-.117 .007h-3v1h3a1 1 0 0 1 .991 1.131l-.02 .112l-1 4a1 1 0 0 1 -.858 .75l-.113 .007h-2v6a1 1 0 0 1 -.883 .993l-.117 .007h-4a1 1 0 0 1 -.993 -.883l-.007 -.117v-6h-2a1 1 0 0 1 -.993 -.883l-.007 -.117v-4a1 1 0 0 1 .883 -.993l.117 -.007h2v-1a6 6 0 0 1 5.775 -5.996l.225 -.004h3z" stroke-width="0" fill="currentColor"></path>
          </svg>
    
          <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M8 20l4 -9"></path>
            <path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7"></path>
            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
          </svg>
        </div>
    
        <div class="absolute bg-white inset-0 -z-20 rounded-xl"></div>
    
        <div id="panel-content" class="absolute bg-white inset-0 opacity-0 pointer-events-none transition-all duration-500 rounded-xl p-8 space-y-4">
          <h2 class="font-bold">Mary Jane</h2>
          <p class="text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis soluta aliquam accusantium laborum. Earum magni necessitatibus, cupiditate atque voluptatem, obcaecati.</p>
          <label for="content" class="cursor-pointer absolute top-0 right-4  w-6 h-6 text-base text-gray-500 grid place-items-center material-symbols-outlined hover:scale-150  transition">close</label>
        </div>
    
      </div>
    </body>
    <!-- partial -->
      
    </body>
    </html>

    In conclusion, creating a Glassy Profile Card using HTML and Tailwind CSS has been an exciting and educational project. By combining HTML for structure and Tailwind CSS for styling, we’ve crafted a modern, glass-like profile card that is both visually appealing and responsive.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to make Glowing Neon Clock using HTML CSS & JavaScript
    Next Article How to make On-Scroll Fire Transition effect using HTML CSS & JavaScript
    Coding Stella
    • Website

    Related Posts

    HTML & CSS

    How to create Solar System Explorer using HTML and CSS

    31 July 2025
    HTML & CSS

    How to create Animated 404 Page not found using HTML and CSS

    29 July 2025
    HTML & CSS

    How to create Cat Loading Animation using HTML and CSS

    23 July 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202421K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202420K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202418K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202413K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to create Glowing Neon Cursor using HTML CSS and JS

    2 August 2025

    How to create Valentine’s Day Letter using HTML CSS & JavaScript

    14 February 2025

    How to create Merry Christmas Tree Animation using HTML CSS & JavaScript

    18 December 2024

    Backend Developer Skills: Definition, Languages & Examples

    16 February 2024
    Latest Post

    How to create Glowing Neon Cursor using HTML CSS and JS

    2 August 2025

    How to create Solar System Explorer using HTML and CSS

    31 July 2025

    How to create Animated 404 Page not found using HTML and CSS

    29 July 2025

    How to create Reptile Interactive Cursor using HTML and JS

    27 July 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood