Home
Isabel McGuigan
Tailwind AoPS Demo - Isabel

Tailwind AoPS Demo - Isabel

Starter code for an interactive Tailwind Demo

This tailwind example is contributed by Isabel McGuigan, on 21-Jun-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Isabel McGuigan

2.3k

Fork Fullscreen

<div class="relative group transition-all duration-500 hover:bg-orange-100 hover:border-orange-700 hover:border-b w-[248px] h-[318px]">
    
    <img class = "transition-all duration-500 grayscale group-hover:grayscale-0 group-hover:rounded-br-[80px] w-[248px] h-[248px]" src="https://data.artofproblemsolving.com/images/people/rlemon309x309.png" />
    <div class = "transition-all duration-500 p-1 group-hover:pl-1.5 pt-4">
        <p class="text-base text-gray-900 font-sans">Ryan Lemon</p>
        <p class="text-sm text-gray-700 font-sans">Software Engineering Team Lead</p>
    </div>
    
    <svg class = "transition-all duration-500 opacity-0 group-hover:opacity-100 absolute bottom-[12px] right-[3px]" xmlns="http://www.w3.org/2000/svg" width="45" height="64" viewBox="0 0 45 64" fill="none">
        <path d="M5.67927 0.685928C5.66838 0.658706 5.65749 0.636925 5.65749 0.636925L3.81168 1.12696C5.55403 11.7281 0.588324 15.4905 0.375974 15.6484L1.49217 17.2056C1.69363 17.0641 5.49414 14.2654 6.03318 7.14353C9.0333 14.2545 13.0244 20.1731 17.1298 24.774C17.059 24.8774 16.9882 24.9754 16.9229 25.0789C14.3311 29.0645 14.0861 34.651 16.1933 41.6912C18.6271 49.8203 24.5239 57.748 32.3754 63.4434L33.5025 61.8916C25.9886 56.4358 20.3477 48.8729 18.0336 41.1358C16.1388 34.8089 16.2913 29.6526 18.4692 26.2114C21.7035 29.5927 24.9432 32.1518 27.7636 33.8288C33.8945 37.4659 38.2232 36.377 40.2541 35.4078C42.4919 34.3406 44.1254 32.375 44.414 30.4094C44.4575 30.1099 44.4793 29.805 44.4793 29.5001C44.4793 27.5509 43.5864 25.5853 41.9039 23.8756C38.4628 20.3691 32.713 18.7465 26.5276 19.5306C23.1518 19.9607 20.3695 21.2457 18.3603 23.2821C14.4455 18.8554 10.645 13.1655 7.77554 6.34314C9.95348 8.22706 13.2476 10.2199 18.1425 11.5266L18.638 9.67539C9.24565 7.16531 6.28364 1.94369 5.75005 0.838382C5.73371 0.783935 5.71193 0.729488 5.6956 0.669594L5.67382 0.669594L5.67927 0.685928ZM26.7672 21.4308C33.3555 20.5923 38.2014 22.8411 40.5372 25.215C42.0509 26.7559 42.7533 28.5037 42.5192 30.1317C42.3558 31.2425 41.3431 32.767 39.4319 33.6763C37.744 34.4822 34.1069 35.3642 28.7437 32.179C25.9886 30.5455 22.8197 28.03 19.6617 24.6923C21.7797 22.5035 24.6056 21.6976 26.7726 21.4254L26.7672 21.4308Z" fill="#F04E29"/>
    </svg>
</div>

Related Examples

Issue card
card designed to display the details of a technical issue

Author:
ABDO-SY

8 months ago

1.6k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

5 months ago

727
User Card

Author:
Md. Tofayel islam

9 months ago

931
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

1 year ago

1.5k
cards order
odering samethng

Author:
Uwase Alliance

4 months ago

323
User Profile Sidebar Menu
A clean and modern user profile sidebar menu built with TailwindCSS. This component displays a user’s profile picture, name, and a vertical navigation menu with links such as Dashboard, Order History, Account Details, Address, Reviews, and Logout. Ideal for account dashboards in web applications, the design features rounded corners, subtle shadows, and interactive hover effects, delivering a smooth and user-friendly experience.

Author:
SHARIFUL ISLAM

7 months ago

913
cards
html , css ,

Author:
Hacker Development

5 months ago

589
Card
Card with Likes and download Button

Author:
Mrunal Solkar

2 years ago

10.4k
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

11 months ago

2k
card

Author:
pablitodgb

3 months ago

206
What is Webby
Webby is a PHP Framework built on top of Codeigniter 3 for easy PHP web application development using both HMVC and MVC patterns.

Author:
Developer Kwame

1 year ago

2k
Responsive Cards

Author:
Anonymous

1 year ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components