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 90

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

ServerHub Interface

МОЙДОЫР

11 months ago

1.3k
Energy Efficiency Program - Oklahoma
Code for new IT proposal

Mario Williams

1 year ago

850
Giftcard grid

ariaw

1 year ago

1.3k
To-Do List with Tailwind CSS
A simple and responsive to-do list built with HTML, JavaScript, and Tailwind CSS. Features task addition, completion, and deletion. Perfect for beginner projects or component demos.

Sudip chaudhary

1 year ago

1.8k
Creative Bento Gallery
A modern bento-style gallery combining differently sized image cards in a structured and visually engaging layout.

JUGENDRA GANGWAR

2 months ago

301
Visernic Profile

MD Mostafa Niloy

11 months ago

1.2k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

SANJAY SINGH GARIYA

1 year ago

2.3k
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

KULDEEP

1 year ago

973
Responsive SaaS Pricing Cards with Monthly Yearly Toggle

JUGENDRA GANGWAR

1 month ago

30
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

rohit whyphy

1 year ago

1.6k
simple responsive blog layout with sidebar

Isabella Kowalski

3 years ago

10.4k
Moving Background Animation

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

4.2k