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

1.9k

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

Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

6 months ago

645
Profile, Team or Testimonial
Profile, Team or Testimonial

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.6k
Avtar Cards
this is cards, for the profile section

Author:
pablitodgb

4 months ago

172
Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

1 year ago

1.9k
Product Details Card

Author:
ABDO-SY

8 months ago

1.8k
Info Card
Information card with image

Author:
Brandon D

3 years ago

9.5k
Futuristic 3D Tilt Card
Hover to see the 3D effect

Author:
Quentin Rivers

1 year ago

2.6k
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

2 years ago

10.7k
Minimal Card
This is awesome looking card

Author:
Shaik Sameer Basha

1 year ago

2.7k
Watch Card
Watch Cards

Author:
Anonymous

1 year ago

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

Author:
Dika Rahman

1 year ago

1.5k
Beautiful and Responsive Card Component
Modern, professional and responsive card component for the blog/services/info

Author:
Rajesh Maheshwari

8 months ago

880

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components