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

Total balance overview

Raul antonio de la cruz hernandez

10 months ago

1.1k
Twitter tweet clone
Replica of twitter tweet card

Sophia Baker

3 years ago

10.4k
Cards section - Sport

ABDO-SY

1 year ago

3.2k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1k
Responsive Photo Grid
A fully responsive image grid that automatically adjusts its columns across mobile, tablet, and desktop screens.

JUGENDRA GANGWAR

2 months ago

144
Image Card
An image. Shows title and description info when hovering. Image zooms and darkens when hovering.

Nick Girga

1 year ago

1.1k
beautifull Authentication Page
I create a Authentication page using cloude ai model.

Akram Khan

2 years ago

3.2k
card appetizer
ss

Anonymous

1 year ago

2.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.6k
Blog Card

Md. Tofayel islam

1 year ago

2.6k
Simple Card with Image
Horizontal card

Prem..

4 years ago

10.1k
Chats Message Screen in neomorphism
light/dark chat screen

Akram Khan

2 years ago

2.9k