ScaleMasteryyy

This tailwind example is contributed by Antonio Rodriguez Jr., on 22-Aug-2024. Component is made with Tailwind v3.4. similar terms for this example are popup,dialog

Modal

Author Antonio Rodriguez Jr.

Tailwind v3.4 33

Fork Fullscreen

import React from 'react';

const DeadlockComponent = () => (
<div className="max-w-4xl mx-auto p-6 bg-white shadow-md rounded-md">
  <div className="text-xl font-bold mb-4">Deadlock Information</div>
  <div className="border-t border-b border-gray-200 py-4">
    <div className="text-lg font-semibold mb-2">Victim List</div>
    <div className="flex items-center">
      <div className="text-gray-600 mr-2">Victim Process ID:</div>
      <div className="text-gray-800">process1820f03f848</div>
    </div>
  </div>
  <div className="border-b border-gray-200 py-4">
    <div className="text-lg font-semibold mb-2">Process List</div>
    <div className="py-2">
      <div className="text-gray-600">Process 1:</div>
      <div className="ml-4">
        <div className="flex items-center">
          <div className="text-gray-600 mr-2">ID:</div>
          <div className="text-gray-800">process1820f03f848</div>
        </div>
        <div className="flex items-center">
          <div className="text-gray-600 mr-2">Task Priority:</div>
          <div className="text-gray-800">0</div>
        </div>
        {/* Add more process details as needed */}
      </div>
    </div>
    <div className="py-2">
      <div className="text-gray-600">Process 2:</div>
      <div className="ml-4">
        <div className="flex items-center">
          <div className="text-gray-600 mr-2">ID:</div>
          <div className="text-gray-800">process182003acca8</div>
        </div>
        <div className="flex items-center">
          <div className="text-gray-600 mr-2">Task Priority:</div>
          <div className="text-gray-800">0</div>
        </div>
        {/* Add more process details as needed */}
      </div>
    </div>
  </div>
  <div className="border-b border-gray-200 py-4">
    <div className="text-lg font-semibold mb-2">Resource List</div>
    <div className="py-2">
      <div className="text-gray-600">Resource 1:</div>
      <div className="ml-4">
        <div className="flex items-center">
          <div className="text-gray-600 mr-2">File ID:</div>
          <div className="text-gray-800">1</div>
        </div>
        {/* Add more resource details as needed */}
      </div>
    </div>
    <div className="py-2">
      <div className="text-gray-600">Resource 2:</div>
      <div className="ml-4">
        <div className="flex items-center">
          <div className="text-gray-600 mr-2">File ID:</div>
          <div className="text-gray-800">1</div>
        </div>
        {/* Add more resource details as needed */}
      </div>
    </div>
  </div>
</div>
);

export default DeadlockComponent;

Related Examples

Social media login modal
Popup model for social media login. i.e. google and GitHub. you can add more buttons according to your need

Sameer Sultana

3 years ago

15.8k
Simple Alret Modal
Minimal Modal

_Amar_

4 years ago

12.7k
Modal with background overlay
Reduce the opacity of the page content to bring the focus to the modal.

Abigail

3 years ago

12.6k
Modal popup
Working modal in tailwind CSS Simple snippet for creating models with tailwind and javascript

Lukas Müller

3 years ago

44.2k
Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

2 months ago

86
Home page 2
Отзывчивый логотип по центру. Интерактивные кнопки призыва к действию.

Alla Telegina

1 year ago

1.4k
Donate Hero section
Best New tailwindcss,help save the children

ORGIN_DREAMS

1 year ago

1.4k
Confirmation modal/card

Sophia Baker

3 years ago

16.6k
Tailwind CSS Modal

Krishna Gudpalle

4 years ago

12.9k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Ti To

2 years ago

7.8k
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

2k
Confirmation Dialog Box

Anonymous

3 years ago

17.4k