Home
ABDO-SY
Issue card

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 CSS v3. It is responsive.

Card

Author ABDO-SY

2.2k

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

Shoping Cart Popup

Author:
ABDO-SY

1 year ago

1.3k
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

6.6k
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

5.3k
beautifull project page

Author:
Akram Khan

1 year ago

2.4k
Card grid section
Display article/blog grid

Author:
Mr Robot

3 years ago

29.9k
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.7k
Blog post cards
responsive blog post cards

Author:
Mr Robot

3 years ago

12.8k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

10 months ago

1.3k
Card
Card Layout in Tailwind as React Compoment

Author:
Deepak Sharma

1 year ago

1.2k
Confirmation modal/card

Author:
Sophia Baker

3 years ago

15.8k
Info Card
info card with description

Author:
Prashant

3 years ago

13k
google ui cards
google ui cards

Author:
Anonymous

2 years ago

9.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components