info form

This tailwind example is contributed by Anonymous, on 29-Sep-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Anonymous

Tailwind v3.4 91

Fork Fullscreen

@if (selectedClinic) {
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">

<div class="flex items-center justify-between border-b px-6 py-4">
        <div>
          <h2 class="text-xl font-semibold text-gray-800">
            Clinic Details
          </h2>
          <p class="text-sm text-gray-500">
            {{ selectedClinic.clinicCode }}
          </p>
        </div>

<button
          type="button"
          (click)="closeView()"
          class="text-2xl text-gray-500 hover:text-gray-800">
          &times;
        </button>
      </div>

<div class="max-h-[75vh] overflow-y-auto px-6 py-5">

<h3 class="mb-4 text-lg font-semibold text-gray-800">
          Basic Information
        </h3>

<div>
            <p class="text-sm text-gray-500">Clinic Name</p>
            <p class="font-medium text-gray-800">
              {{ selectedClinic.clinicName }}
            </p>
          </div>

<div>
            <p class="text-sm text-gray-500">Clinic Code</p>
            <p class="font-medium text-gray-800">
              {{ selectedClinic.clinicCode }}
            </p>
          </div>

<div>
            <p class="text-sm text-gray-500">City</p>
            <p class="font-medium text-gray-800">
              {{ selectedClinic.city }}
            </p>
          </div>

<div>
            <p class="text-sm text-gray-500">Phone</p>
            <p class="font-medium text-gray-800">
              {{ selectedClinic.phone }}
            </p>
          </div>

<div>
            <p class="text-sm text-gray-500">Email</p>
            <p class="font-medium text-gray-800">
              {{ selectedClinic.email }}
            </p>
          </div>

<div>
            <p class="text-sm text-gray-500">Address</p>
            <p class="font-medium text-gray-800">
              {{ selectedClinic.address }}
            </p>
          </div>

</div>

<h3 class="mb-4 mt-8 text-lg font-semibold text-gray-800">
          Timing & Appointment
        </h3>

<div>
            <p class="text-sm text-gray-500">Opening Time</p>
            <p class="font-medium text-gray-800">
              {{ selectedClinic.openingTime }}
            </p>
          </div>

<div>
            <p class="text-sm text-gray-500">Closing Time</p>
            <p class="font-medium text-gray-800">
              {{ selectedClinic.closingTime }}
            </p>
          </div>

<div>
            <p class="text-sm text-gray-500">Appointment Duration</p>
            <p class="font-medium text-gray-800">
              {{ selectedClinic.appointmentDuration }} Minutes
            </p>
          </div>

</div>

<h3 class="mb-4 mt-8 text-lg font-semibold text-gray-800">
          Status
        </h3>

</span>

Emergency:
            {{ selectedClinic.emergencyServices ? 'Yes' : 'No' }}

</span>

</div>

<h3 class="mb-4 mt-8 text-lg font-semibold text-gray-800">
          Doctors ({{ selectedClinic.doctors?.length || 0 }})
        </h3>

@if (selectedClinic.doctors?.length) {

<thead class="bg-gray-50">
                <tr>
                  <th class="px-4 py-3 font-semibold text-gray-600">
                    Doctor
                  </th>

<th class="px-4 py-3 font-semibold text-gray-600">
                    Specialization
                  </th>

<th class="px-4 py-3 font-semibold text-gray-600">
                    Experience
                  </th>

<th class="px-4 py-3 font-semibold text-gray-600">
                    Status
                  </th>
                </tr>
              </thead>

<tbody>

@for (doctor of selectedClinic.doctors; track doctor.id) {

<td class="px-4 py-3">
                      {{ doctor.doctorName }}
                    </td>

<td class="px-4 py-3">
                      {{ doctor.specializationName }}
                    </td>

<td class="px-4 py-3">
                      {{ doctor.yearsOfExperience }} years
                    </td>

</span>

</td>

</tr>

}

</tbody>

</table>

</div>

} @else {

<div class="rounded-lg border border-dashed p-6 text-center text-gray-500">
            No doctors found for this clinic.
          </div>

}

<h3 class="mb-4 mt-8 text-lg font-semibold text-gray-800">
          Audit Information
        </h3>

<div>
            <p class="text-sm text-gray-500">Created By</p>
            <p class="font-medium text-gray-800">
              {{ selectedClinic.createdBy || '-' }}
            </p>
          </div>

<div>
            <p class="text-sm text-gray-500">Created Date</p>
            <p class="font-medium text-gray-800">
              {{ selectedClinic.createdDate | date:'medium' }}
            </p>
          </div>

<div>
            <p class="text-sm text-gray-500">Updated By</p>
            <p class="font-medium text-gray-800">
              {{ selectedClinic.updatedBy || '-' }}
            </p>
          </div>

<div>
            <p class="text-sm text-gray-500">Updated Date</p>
            <p class="font-medium text-gray-800">
              {{ selectedClinic.updatedDate
                ? (selectedClinic.updatedDate | date:'medium')
                : '-' }}
            </p>
          </div>

</div>

<div class="flex justify-end border-t px-6 py-4">

<button
          type="button"
          (click)="closeView()"
          class="rounded-lg bg-gray-800 px-5 py-2 text-sm font-medium text-white hover:bg-gray-700">
          Close
        </button>

</div>

</div>
  </div>
}

Related Examples

Automation that delivers real results
We design high modern UI

Alif Bima Pradana

8 months ago

536
Native HTML Accordion
native html accordion summary details

Cristian

2 years ago

2.9k
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Indra

1 year ago

1.3k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Muhammad Umair Arshad

1 year ago

1.7k
super admin
super admin

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.3k
Responsive layout with header, main body, aside (sidebar) and footer

Ahmed Malik

3 years ago

13k
Growing Navigation Menu with Tailwind CSS
PREVIEW ON FULL SCREEN BECAUSE INSIDE THE NAV BAR IT CONTAINS (aria-current="page") which create some issues inside canvas. A clean and minimal vertical navigation menu built with Tailwind CSS featuring smooth line expansion, hover interactions, and active link highlighting. The component uses lightweight CSS transitions with aria-current support for accessible active states, making it ideal for documentation websites, portfolios, dashboards, and landing pages.

Arshid Iqbal

3 months ago

272
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Samuel Dawson

3 years ago

22.1k
Phone Simulator with Built-in Car Racing Game and Play.
This is a complete virtual smartphone simulator built using HTML, CSS, Tailwind CSS, JavaScript, and Font Awesome Icons and mobile responsive . It provides a realistic phone interface with multiple apps, and the highlight is a fully playable Car Racing Game built right into it where you can actually play the car game.

Arjun Kumar

4 months ago

649
The Life of a Singularity
The Life of a Singularity is the story of one powerful idea evolving into endless possibilities. It symbolizes innovation, intelligence, and the continuous pursuit of creating smarter, faster, and more connected experiences.

Lokesh H

3 months ago

112
profile
user profile

gidy

1 year ago

1.1k
omerlinks Calendrier Glassmorphism
omerlinks Calendrier Glassmorphism

Omer fils ELENGA

9 months ago

927