Issue card

card designed to display the details of a technical issue

This tailwind example is contributed by ABDO-SY, on 10-Feb-2025. Component is made with Tailwind v3.4. It is responsive.

Card

Author ABDO-SY

Tailwind v3.4 2.7k 1

Fork Fullscreen

<div class="max-w-2xl mt-4 mx-auto bg-gray-900 shadow-lg rounded-2xl">
  <div class="px-6 py-5">
    <div class="flex items-start">
      <div class="flex-grow truncate">
        <div class="w-full sm:flex justify-between items-center mb-3">
          <h2 class="text-2xl leading-snug font-extrabold text-gray-50 truncate mb-1 sm:mb-0">Login Issue</h2>
        </div><span class="bg-red-500 px-2 py-0.5 font-semibold text-sm rounded-lg text-white">Open</span>
        <span class="bg-yellow-500 px-2 py-0.5 font-semibold text-sm rounded-lg text-white">In-progress</span>
        <span class="bg-green-500 px-2 py-0.5 font-semibold text-sm rounded-lg text-white">Closed</span>
        <div class="flex items-end justify-between whitespace-normal">
          <div class="max-w-md text-indigo-100">
            <p class="mb-2">Users are unable to log in using their credentials. The system shows an incorrect password
              error even when the credentials are correct. This issue started after the last update.</p>
          </div>
        </div>
        <div class="flex items-center  ml-4">
          <div class="flex gap-4  items-center mr-4">
            <button class="cursor-pointer "><svg width="48px" height="48px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 11L12 8M12 8L9 11M12 8V16M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#fff" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><span class="text-white">0</span><button class="cursor-pointer"><svg width="48px" height="48px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 13L12 16M12 16L15 13M12 16V8M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#fff" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"></path></svg></button>
          </div><span class="text-sm text-gray-400">02/10/2025, 10:01 AM</span>
        </div>
      </div>
      <div class="flex flex-col mt-auto gap-[10px]">
        <button class=" cursor-pointer flex gap-2 items-center text-left text-sm font-medium text-indigo-100 hover:text-white group focus:outline-none focus-visible:border-b focus-visible:border-indigo-100"><svg width="24px" height="24px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M960 160h-291.2a160 160 0 0 0-313.6 0H64a32 32 0 0 0 0 64h896a32 32 0 0 0 0-64zM512 96a96 96 0 0 1 90.24 64h-180.48A96 96 0 0 1 512 96zM844.16 290.56a32 32 0 0 0-34.88 6.72A32 32 0 0 0 800 320a32 32 0 1 0 64 0 33.6 33.6 0 0 0-9.28-22.72 32 32 0 0 0-10.56-6.72zM832 416a32 32 0 0 0-32 32v96a32 32 0 0 0 64 0v-96a32 32 0 0 0-32-32zM832 640a32 32 0 0 0-32 32v224a32 32 0 0 1-32 32H256a32 32 0 0 1-32-32V320a32 32 0 0 0-64 0v576a96 96 0 0 0 96 96h512a96 96 0 0 0 96-96v-224a32 32 0 0 0-32-32z" fill="#fff"></path><path d="M384 768V352a32 32 0 0 0-64 0v416a32 32 0 0 0 64 0zM544 768V352a32 32 0 0 0-64 0v416a32 32 0 0 0 64 0zM704 768V352a32 32 0 0 0-64 0v416a32 32 0 0 0 64 0z" fill="#fff"></path></svg></button><a
          class="cursor-pointer flex gap-2 items-center text-left text-sm font-medium text-indigo-100 hover:text-white group focus:outline-none focus-visible:border-b focus-visible:border-indigo-100"
          href="/edit/ug7053w5x6ug5jrkt295g4fo"><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none"
            xmlns="http://www.w3.org/2000/svg">
            <path d="M11 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22H15C20 22 22 20 22 15V13" stroke="#FFF" stroke-width="1.5"
              stroke-linecap="round" stroke-linejoin="round"></path>
            <path
              d="M16.04 3.02001L8.16 10.9C7.86 11.2 7.56 11.79 7.5 12.22L7.07 15.23C6.91 16.32 7.68 17.08 8.77 16.93L11.78 16.5C12.2 16.44 12.79 16.14 13.1 15.84L20.98 7.96001C22.34 6.60001 22.98 5.02001 20.98 3.02001C18.98 1.02001 17.4 1.66001 16.04 3.02001Z"
              stroke="#FFF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round">
            </path>
            <path d="M14.91 4.1499C15.58 6.5399 17.45 8.4099 19.85 9.0899" stroke="FFF" stroke-width="1.5"
              stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a><button class=" cursor-pointer flex flex-col items-center text-left text-sm font-medium text-indigo-100 hover:text-white group focus:outline-none focus-visible:border-b focus-visible:border-indigo-100"><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.0039 12C21.0039 16.9706 16.9745 21 12.0039 21C9.9675 21 3.00463 21 3.00463 21C3.00463 21 4.56382 17.2561 3.93982 16.0008C3.34076 14.7956 3.00391 13.4372 3.00391 12C3.00391 7.02944 7.03334 3 12.0039 3C16.9745 3 21.0039 7.02944 21.0039 12Z" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg><span>8</span></button>
      </div>
    </div>
  </div>
</div>

Related Examples

Notification
Pop up card when form submitted is successful

Olajide Olamide (Laemmy)

6 months ago

774
Profile Card

Crimson

1 year ago

2k
3D Card
Made a 3d card using tailwind css and the js

Sufyan jutt

8 months ago

883
beautifull project Item

Akram Khan

2 years ago

3.6k
Feature card

Matti

1 year ago

2k
Responsive Testimonial Card with stars ratings

Quentin Rivers

2 years ago

2.8k
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.

SHARIFUL ISLAM

1 year ago

1.9k
Tailwind CSS Book

Michael Andreuzza

2 years ago

3.5k
Hover Card

Maxim

2 years ago

3.3k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2.1k
Tailwind image grid
tailwind picture grid

Anonymous

2 years ago

11.4k
Dashboard Stats Widget
Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

dev-fab250

1 year ago

2.4k