Notifications and Messages card in Tailwind by Nitin Kumar Output View Horizontal Vertical HTML CSS JS Tidy <body class="text-gray-400 bg-gray-200 flex flex-col gap-4 justify-center items-center min-h-screen [&_*]:transition-all [&_*]:duration-500 [&_*]:ease-in-out "> <input class="peer/option1 sr-only" id="option-1" type="radio" name="panel" /> <input class="peer/option2 sr-only" id="option-2" type="radio" name="panel" checked /> <main class="grid [grid-template-areas:'stack'] bg-white rounded-md w-72 sm:w-96 shadow-xl shadow-blue-300 relative isolate before:absolute before:bg-blue-100 before:w-4 before:aspect-square before:right-8 before:-top-2 before:rotate-45 before:transition-all before:duration-300 peer-checked/option1:before:right-[7.5rem] [&>section]:[grid-area:stack] [&>section>article]:overflow-hidden [&>section>article>div]:delay-300-X [&_h2]:bg-blue-100 [&_h2]:p-4 sm:[&_h2]:p-6 [&_h2]:text-center [&_h2]:text-blue-400 [&_h2]:uppercase [&_h2]:rounded-t-md [&_h2]: [&_h2>span]:block [&>section>article>div]:flex [&>section>article>div]:items-center [&>section>article>div]:gap-4 [&>section>article>div] [&>section>article>div]:py-3 sm:[&>section>article>div]:py-4 [&>section>article>div]:px-4 sm:[&>section>article>div]:px-6 [&>section>article>div]:realtive [&>section>article>div]:isolate [&>section>article>div]: before:[&>section>article>div]:absolute before:[&>section>article>div]:inset-[100%_0_100%_0] before:[&>section>article>div]:m-auto before:[&>section>article>div]:transition-all before:[&>section>article>div]:duration-300 before:[&>section>article>div]:bg-blue-50 before:[&>section>article>div]:-z-10 hover:before:[&>section>article>div]:inset-0 hover:[&>section>article>div]:text-slate-700-X [&>section>article>div_span]:text-blue-400 [&>section>article>div>div]:ml-auto [&>section>article>div>div]:rounded-full [&>section>article>div>div]:text-sm [&>section>article>div>div]:px-3 [&>section>article>div>div]:border [&>section>article>div>div]:border-lime-400 [&>section>article>div]:-translate-x-full peer-checked/option1:[&>section.option-1>article>div]:translate-x-0 peer-checked/option2:[&>section.option-2>article>div]:translate-x-0 [&_h2>span]:-translate-y-[80px] peer-checked/option1:[&>section.option-1_h2>span]:translate-y-0 peer-checked/option2:[&>section.option-2_h2>span]:translate-y-0 "> <section class="option-1"> <article> <h2><span>Messages</span></h2> <div class="group delay-[300ms]"> <span class="material-symbols-outlined material-fill-1">email</span> Raymond <div class="group-hover:bg-lime-400 group-hover:text-slate-700">7</div> </div> <div class="group delay-[400ms]"> <span class="material-symbols-outlined material-fill-1">email</span> Elizabeth <div class="group-hover:bg-lime-400 group-hover:text-slate-700">6</div> </div> <div class="group delay-[500ms]"> <span class="material-symbols-outlined material-fill-1 material-fill-1">email</span> Philip <div class="group-hover:bg-lime-400 group-hover:text-slate-700">1</div> </div> <div class="group delay-[600ms]"> <span class="material-symbols-outlined material-fill-1">email</span> Gloria <div class="group-hover:bg-lime-400 group-hover:text-slate-700">3</div> </div> <div class="group delay-[600ms]"> <span class="material-symbols-outlined material-fill-1">group</span> Group <div class="group-hover:bg-lime-400 group-hover:text-slate-700">4</div> </article> </section> <section class="option-2"> <article> <h2><span>Notifications</span></h2> <div class="group delay-[300ms]"> <span class="material-symbols-outlined material-fill-1">person_add</span> Friend Requests <div class="group-hover:bg-lime-400 group-hover:text-slate-700">23</div> </div> <div class="group delay-[400ms]"> <span class="material-symbols-outlined material-fill-1">comment</span> Comments <div class="group-hover:bg-lime-400 group-hover:text-slate-700">14</div> </div> <div class="group delay-[500ms]"> <span class="material-symbols-outlined material-fill-1">star</span> Favorites <div class="group-hover:bg-lime-400 group-hover:text-slate-700">11</div> </div> <div class="group delay-[600ms]"> <span class="material-symbols-outlined material-fill-1">visibility</span> Visitors <div class="group-hover:bg-lime-400 group-hover:text-slate-700">49</div> </div> <div class="group delay-[600ms]"> <span class="material-symbols-outlined material-fill-1">chat</span> Message <div class="group-hover:bg-lime-400 group-hover:text-slate-700">12</div> </div> </article> </section> </main> <div class="flex items-center gap-2 justify-start w-72 sm:w-96 [&>label]:bg-blue-50 [&>label]:text-blue-300 [&>label]:rounded-full [&>label]:grid [&>label]:place-content-center [&>label]:w-16 sm:[&>label]:w-20 [&>label]:aspect-square [&>label]:cursor-pointer [&>label]:text-3xl [&>label]:relative [&>label]:isolate before:[&>label]:content-[attr(data-alerts)] before:[&>label]:absolute before:[&>label]:font-sans before:[&>label]:top-0 before:[&>label]:-right-3 before:[&>label]:text-green-500 before:[&>label]:w-10 before:[&>label]:h-6 before:[&>label]:rounded-full before:[&>label]:bg-white before:[&>label]:text-xs before:[&>label]:grid before:[&>label]:place-content-center after:[&>label]:bg-blue-400 after:[&>label]:absolute after:[&>label]:inset-0 after:[&>label]:m-auto after:[&>label]:rounded-full after:[&>label]:-z-10 after:[&>label]:scale-0 after:[&>label]:transition-all after:[&>label]:duration-300 hover:after:[&>label]:scale-50 hover:[&>label]:text-white peer-checked/option1:after:[&>label.option-1]:scale-100 peer-checked/option1:[&>label.option-1]:text-white peer-checked/option2:after:[&>label.option-2]:scale-100 peer-checked/option2:[&>label.option-2]:text-white "> <label for="option-1" class="option-1 material-symbols-outlined material-fill-1" data-alerts="27">chat</label> <label for="option-2" class="option-2 material-symbols-outlined material-fill-1" data-alerts="7">notifications</label> </div> </body> HTML CSS JS Tidy HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Notifications and Messages card component in Tailwind CSS, Feature hover, text animation on click button. Catagory Tailwind Tags Animation CSS Card Hover Effect Resource Add External Stylesheets and Script <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
