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

640

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

Admin dashboard cards
Card groups for showing stats/info. Change it for responsiveness for small and medium screen

Author:
RShubham kumar

1 year ago

3.6k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

2 years ago

9.5k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

5 months ago

1.1k
Pokemon!
Cool Pokemon card!

Author:
Crimson

3 months ago

584
Landing page

Author:
Maxim

1 month ago

492
Simple responsive cards

Author:
Shakti

2 years ago

9.2k
Form package

Author:
Hunter Guru

1 year ago

1.9k
Gradient card

Author:
TailwindFlex

2 years ago

8.5k
Info Card with image
An info card with an image, a short title, and a short description.

Author:
Arya

2 years ago

12.1k
Info Card
Information card with image

Author:
Brandon D

2 years ago

8.7k
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

2 months ago

348
Tailwind image slider
slider with navigation buttons and info about image

Author:
Anonymous

1 year ago

19k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components