<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>UNIOSUN Teaching Hospital, Osogbo</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f7fafc; /* Light gray background */
        }
        .container {
            max-width: 1200px;
            margin: auto;
            padding: 16px;
        }
        /* Header Styles */
        .header {
            background-color: #f7fafc; /* bg-gray-100 */
            padding: 16px 0; /* py-4 */
        }
        .header .flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: auto;
            padding: 0 20px;
        }
        .header img {
            margin-right: 16px; /* mr-4 */
        }
        .header h1 {
            font-size: 1.25rem; /* text-xl */
            font-weight: bold; /* font-bold */
            margin: 0; /* Reset margin */
        }
        .header p {
            font-size: 0.875rem; /* text-sm */
            margin: 0; /* Reset margin */
        }
        .header input {
            border: 1px solid #d1d5db; /* border-gray-300 */
            border-radius: 4px; /* rounded */
            padding: 8px 16px; /* py-2 px-4 */
            margin-right: 16px; /* mr-4 */
        }
        /* Top Bar Styles */
        .top-bar {
            background-color: #06b6d4; /* bg-cyan-600 */
            color: white;
            text-align: center; /* center */
            padding: 8px 0; /* py-2 */
        }
        .top-bar p {
            font-size: 1.125rem; /* text-lg */
            font-weight: bold; /* font-bold */
            margin: 0; /* Reset margin */
        }
        /* Navigation Styles */
        .nav {
            background-color: white; /* bg-white */
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* shadow */
            padding: 16px 0; /* py-4 */
        }
        .nav ul {
            display: flex; /* flex */
            justify-content: space-around; /* justify-between */
            padding: 0 20px; /* container padding */
            max-width: 1200px;
            margin: auto;
            list-style-type: none; /* Remove default list style */
        }
        .nav li {
            position: relative; /* For dropdown positioning */
        }
        .nav a {
            text-decoration: none;
            color: #4b5563; /* text-gray-600 */
            padding: 8px 16px; /* py-2 px-4 */
            transition: color 0.3s; /* Transition for hover */
        }
        .nav a:hover {
            color: #06b6d4; /* text-cyan-600 */
        }
        /* Dropdown Styles */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            min-width: 300px; /* Minimum width for dropdown */
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 1;
            padding: 10px; /* Padding for dropdown */
        }
        .nav li:hover .dropdown-content {
            display: block; /* Show dropdown on hover */
        }
        .dropdown-content ul {
            list-style-type: none; /* Remove default list style */
            padding: 0; /* Remove padding */
            margin: 0; /* Remove margin */
        }
        .dropdown-content li {
            margin: 5px 0; /* Spacing between items */
        }
        /* Main Content Styles */
        .main {
            max-width: 1200px;
            margin: 32px auto; /* my-8 */
            display: flex; /* flex */
            padding: 0 20px; /* container padding */
        }
        .main img {
            width: 66.66667%; /* w-2/3 */
        }
        .sidebar {
            width: 33.33333%; /* w-1/3 */
            padding-left: 32px; /* pl-8 */
        }
        .sidebar ul {
            list-style-type: none; /* Remove default list style */
            padding: 0;
            margin: 0;
        }
        .sidebar a {
            color: #06b6d4; /* text-cyan-600 */
            font-size: 1.125rem; /* text-lg */
            display: block;
            margin-bottom: 10px;
        }
        /* Fund Section Styles */
        .fund-section {
            padding: 20px;
            background-color: #f7fafc; /* Light gray background */
            border: 1px solid #d1d5db; /* Gray border */
            margin-top: 20px;
            border-radius: 8px;
            text-align: left; /* Align text left */
            max-width: 1200px;
            margin: 20px auto; /* Centering the section */
            padding: 16px; /* Adding padding */
        }
        .fund-section h2 {
            font-size: 1.5rem; /* Font size */
            font-weight: bold; /* Bold text */
            margin-bottom: 10px;
        }
        .fund-section p {
            margin-bottom: 10px;
        }
        /* Chat Button */
        .chat-button {
            position: fixed;
            bottom: 16px; /* bottom-4 */
            right: 16px; /* right-4 */
        }
        .chat-button button {
            background-color: #10b981; /* bg-green-500 */
            color: white; /* text-white */
            border: none;
            border-radius: 4px; /* rounded */
            padding: 12px 16px; /* p-4 */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-lg */
            cursor: pointer;
        }
        .chat-button button:focus {
            outline: none; /* Remove focus outline */
        }

        /* Services and News Section */
        .services-news-section {
            margin-top: 32px;
        }
        .text-center {
            text-align: center;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 16px;
        }
        @media (min-width: 768px) {
            .grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        .bg-teal-500 {
            background-color: #0f766e; /* teal-500 */
        }
        .text-white {
            color: #ffffff;
        }
        .text-gray-800 {
            color: #2d3748; /* text-gray-800 */
        }
        .p-6 {
            padding: 24px; /* equivalent to Tailwind's p-6 */
        }
        .rounded-lg {
            border-radius: 8px; /* equivalent to Tailwind's rounded-lg */
        }
        .shadow-lg {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* equivalent to Tailwind's shadow-lg */
        }
        .font-bold {
            font-weight: bold;
        }
        .my-8 {
            margin-top: 32px;
            margin-bottom: 32px;
        }
        .text-3xl {
            font-size: 1.875rem; /* Tailwind's text-3xl */
        }
        .text-lg {
            font-size: 1.125rem; /* equivalent to Tailwind's text-lg */
        }
        .mb-2 {
            margin-bottom: 8px;
        }
        .mb-4 {
            margin-bottom: 16px;
        }
        .bg-gray-100 {
            background-color: #f7fafc; /* Light gray background */
        }
        .flex {
            display: flex;
            align-items: center;
        }
        .mr-2 {
            margin-right: 8px;
        }
        .mt-4 {
            margin-top: 16px;
        }
        .px-4 {
            padding-left: 16px;
            padding-right: 16px;
        }
        .py-2 {
            padding-top: 8px;
            padding-bottom: 8px;
        }
        .rounded {
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <!-- Top Bar -->
    <div class="top-bar">
        <p>UNIOSUN Teaching Hospital, Osogbo.</p>
    </div>
    <!-- Header -->
    <header class="header">
        <div class="flex">
            <div class="flex items-center">
                <img alt="UNIOSUN Teaching Hospital Logo" height="50" 
                     src="https://storage.googleapis.com/a1aa/image/OjrI5gxzOVLI_D0qzN_8AqSq7PsUlod9L901WBLrL6Q.jpg" width="50"/>
                <div>
                    <h1>UNIOSUN</h1>
                    <p>TEACHING HOSPITAL, OSOGBO</p>
                </div>
            </div>
            <div class="flex items-center">
                <input type="text" placeholder="Enter your search"/>
                <button class="text-gray-600">
                    <i class="fas fa-search"></i>
                </button>
            </div>
            <div class="text-sm">
                <p><strong>STAFF WEBMAIL</strong></p>
                <p>MAIL US: <a class="text-cyan-600" href="mailto:info@uth-osogbo.org.ng">info@uth-osogbo.org.ng</a></p>
                <p>CALL US: <a class="text-cyan-600" href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>"><PRESIDIO_ANONYMIZED_PHONE_NUMBER></a></p>
                <p>LOCATION: Station Road, Osogbo</p>
            </div>
        </div>
    </header>
    <!-- Navigation -->
    <nav class="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">Our Journal</a>
                <div class="dropdown-content">
                    <ul>
                        <li><a href="#">Latest Publications</a></li>
                        <li><a href="#">Research Articles</a></li>
                        <li><a href="#">Subscriptions</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#">Departments</a>
                <div class="dropdown-content">
                    <ul>
                        <li>
                            <h3>CLINICALS</h3>
                        </li>
                        <li><a href="#">Chairman Medical Advisory Committee (CMAC)</a></li>
                        <li><a href="#">Anaesthesia</a></li>
                        <li><a href="#">Radiology</a></li>
                        <li><a href="#">Internal Medicine</a></li>
                        <li><a href="#">Obstetric and Gynaecology</a></li>
                        <li><a href="#">Paediatrics</a></li>
                        <li><a href="#">Psychiatry / Mental Health</a></li>
                        <li><a href="#">Dental Surgery</a></li>
                        <li><a href="#">Community Medicine</a></li>
                        <li><a href="#">E. N. T.</a></li>
                        <li><a href="#">Surgery</a></li>
                        <li><a href="#">Ophthalmology</a></li>
                        <li><a href="#">Family Medicine</a></li>
                        <li>
                            <h3>LABORATORIES</h3>
                        </li>
                        <li><a href="#">Histopathology / Morbid Anatomy</a></li>
                        <li><a href="#">Microbiology and Parasitology</a></li>
                        <li><a href="#">Chemical Pathology</a></li>
                        <li><a href="#">Haematology / Blood Bank</a></li>
                        <li>
                            <h3>ADMINISTRATION</h3>
                        </li>
                        <li><a href="#">Chief Medical Director (CMD)</a></li>
                        <li><a href="#">Director of Administration (DA)</a></li>
                        <li><a href="#">Public Relations</a></li>
                        <li><a href="#">Management Information System</a></li>
                        <li><a href="#">Marketing</a></li>
                        <li><a href="#">Security</a></li>
                        <li><a href="#">Transport</a></li>
                        <li><a href="#">Catering</a></li>
                        <li><a href="#">General Administration</a></li>
                        <li><a href="#">Account and Finance</a></li>
                        <li><a href="#">Establishment and Personnel</a></li>
                        <li><a href="#">Internal Audit</a></li>
                        <li><a href="#">Corporate Planning</a></li>
                        <li><a href="#">Stores and Purchasing</a></li>
                        <li><a href="#">Legal and Entrepreneur</a></li>
                        <li><a href="#">Works and Services</a></li>
                        <li><a href="#">Laundry and Tailoring</a></li>
                        <li>
                            <h3>SUB-CLINICALS</h3>
                        </li>
                        <li><a href="#">Health Records</a></li>
                        <li><a href="#">Pharmacy</a></li>
                        <li><a href="#">Nursing</a></li>
                        <li><a href="#">Physiotherapy</a></li>
                        <li><a href="#">Medical Library</a></li>
                        <li><a href="#">Dietetics</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#">Training</a>
                <div class="dropdown-content">
                    <ul>
                        <li><a href="#">Upcoming Workshops</a></li>
                        <li><a href="#">Professional Development</a></li>
                        <li><a href="#">Internships</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#">Research</a>
                <div class="dropdown-content">
                    <ul>
                        <li><a href="#">Current Projects</a></li>
                        <li><a href="#">Funding Opportunities</a></li>
                        <li><a href="#">Research Collaborations</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#">Login</a>
                <div class="dropdown-content">
                    <ul>
                        <li><a href="#">Student Login</a></li>
                        <li><a href="#">Staff Login</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#">Medical Schools</a>
                <div class="dropdown-content">
                    <ul>
                        <li><a href="#">School of Post Basic Pediatric Nursing</a></li>
                        <li><a href="#">School of Medical Records</a></li>
                        <li><a href="#">School of Nursing</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Patients & Visitors</a></li>
            <li><a href="#">Blogs & News</a></li>
        </ul>
    </nav>
    <!-- Main Content -->
    <main class="main">
        <div>
            <img alt="Group of medical professionals" height="400" 
                 src="https://storage.googleapis.com/a1aa/image/OS3Cd2YzxvVNSi7PGbw95EESztmWGeNuRa-k89g-L8A.jpg" 
                 width="800"/>
        </div>
        <div class="sidebar">
            <ul>
                <li><a href="#">Find a Service</a></li>
                <li><a href="#">Patient Guide</a></li>
                <li><a href="#">Public Health Alerts</a></li>
                <li><a href="#">Contact us</a></li>
                <li><a href="#">Staff web mail</a></li>
            </ul>
        </div>
    </main>
    <!-- Itunu Fund Section -->
    <section class="fund-section">
        <h2>ITUNU FUND FOR NEEDY PATIENTS</h2>
        <p>The teaching hospital has witnessed some challenging patients who come to access care but are financially handicapped. These patients are not on any health insurance and therefore need some cash to be treated.</p>
        <p>To assist such patients, the hospital has opened an account, named "Itunu Fund" account, where donors can transfer funds to assist these patients.</p>
        <p>Several patients have benefitted from this by getting their treatment promptly and we are grateful to all our donors who have contributed to this fund since 2003.</p>
        <p>You can also be a part of this team of helping hands by transferring funds to:</p>
        <p><strong>ACCOUNT NAME:</strong> ITUNU FUND</p>
        <p><strong>BANK:</strong> WEMA BANK</p>
        <p><strong>ACCOUNT NUMBER:</strong> 0121774769</p>
        <p>Thanks for being a part of this and for your assistance to our teaching hospital, making it easier to serve our people.</p>
    </section>
    <!-- Services and News Section -->
    <div class="services-news-section">
        <!-- Services Section -->
        <div class="text-center my-8">
            <h2 class="text-3xl font-bold">
                OUR
                <span class="text-teal-500">SERVICES</span>
            </h2>
        </div>
        <div class="grid">
            <div class="bg-teal-500 text-white p-6 rounded-lg shadow-lg">
                <h3 class="text-xl font-bold mb-2">Clinical Services</h3>
                <p>Licensed to practice medicine in the State of Executive's residence. .... .. ....</p>
            </div>
            <div class="bg-white text-gray-800 p-6 rounded-lg shadow-lg">
                <h3 class="text-xl font-bold mb-2">Laboratory Services</h3>
                <p>Future of healthcare is shaping up in our very eyes with advances in digital healthcare technologies.</p>
            </div>
            <div class="bg-white text-gray-800 p-6 rounded-lg shadow-lg">
                <h3 class="text-xl font-bold mb-2">Sub-Clinical Services</h3>
                <p>Our physicians, nurses and other healthcare professionals... All ready at your services</p>
            </div>
        </div>
        <!-- News Section -->
        <div class="text-center my-8">
            <h2 class="text-3xl font-bold">
                LATEST
                <span class="text-teal-500">NEWS</span>
            </h2>
            <p class="text-gray-600">Latest news headlines from UNIOSUN Teaching Hospital. Check out today news</p>
        </div>
        <div class="grid">
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <h3 class="text-lg font-bold mb-2">Here comes our new Chief Medical Director (CMD)</h3>
                <p class="text-gray-600 mb-4">DR. BABATUNDE ADEOLA AFOLABI MB;BS, FWACP , DAE</p>
                <button class="bg-teal-500 text-white px-4 py-2 rounded">Read more</button>
                <div class="flex items-center mt-4 text-gray-600">
                    <i class="fas fa-comments mr-2"></i> 0
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <h3 class="text-lg font-bold mb-2">UNIOSUN TEACHING HOSPITAL, OSOGBO, OSUN...</h3>
                <button class="bg-teal-500 text-white px-4 py-2 rounded">Read more</button>
                <div class="flex items-center mt-4 text-gray-600">
                    <i class="fas fa-comments mr-2"></i> 0
                </div>
            </div>
            <div class="bg-white p-6 rounded-lg shadow-lg">
                <div class="flex items-center mb-4">
                    <div class="bg-teal-500 text-white p-2 rounded mr-4">
                        <span class="block text-center">10</span>
                        <span class="block text-center">Feb</span>
                    </div>
                    <img alt="Doctors smiling" class="rounded" height="100" src="https://storage.googleapis.com/a1aa/image/wY5XEOgfxx7kPVtKy3e2KcoB-ojnjXbl0Mt1Oq3fMsM.jpg" width="100"/>
                </div>
                <h3 class="text-lg font-bold mb-2">UNIOSUN TEACHING HOSPITAL, OSOGBO, OSUN...</h3>
                <button class="bg-teal-500 text-white px-4 py-2 rounded">Read more</button>
                <div class="flex items-center mt-4 text-gray-600">
                    <i class="fas fa-comments mr-2"></i> 0
                </div>
            </div>
        </div>
    </div>
    <!-- Chat Button -->
    <div class="chat-button">
        <button>
            <i class="fas fa-comments"></i> Chat
        </button>
    </div>
</body>
</html>      change the csss like variable to normal css