Skip to content

Instantly share code, notes, and snippets.

@mpakus

mpakus/gist:0d733a19273238c6f1457b29f595cc0c

Created May 23, 2023 14:32
Show Gist options
  • Save mpakus/0d733a19273238c6f1457b29f595cc0c to your computer and use it in GitHub Desktop.
Save mpakus/0d733a19273238c6f1457b29f595cc0c to your computer and use it in GitHub Desktop.
Download ZIP
tailwind-td.html
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<style>
.sidebar {
width: 5rem; /* Adjust the width as needed */
height: 100vh;
background-color: #ffffff;
}
.top-right-icon {
position: absolute;
top: 1rem;
right: 1rem;
}
.transparent-strip {
position: absolute;
top: 0;
right: 0;
width: 20%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="flex">
<div class="sidebar flex flex-col justify-center items-center">
<!-- Add your icons here -->
<img src="path/to/icon1.png" alt="Icon 1" class="w-8 h-8">
<img src="path/to/icon2.png" alt="Icon 2" class="w-8 h-8">
<img src="path/to/icon3.png" alt="Icon 3" class="w-8 h-8">
</div>
<div class="flex-grow">
<div class="top-right-icon">
<img src="path/to/user-icon.png" alt="User Icon" class="w-8 h-8">
</div>
<div class="transparent-strip">
<ul class="flex flex-col mt-8 ml-4">
<li class="mb-4">
<a href="#" class="text-white flex items-center">
<img src="path/to/icon4.png" alt="Icon 4" class="w-4 h-4 mr-2">
Link 1
</a>
</li>
<li class="mb-4">
<a href="#" class="text-white flex items-center">
<img src="path/to/icon5.png" alt="Icon 5" class="w-4 h-4 mr-2">
Link 2
</a>
</li>
<!-- Add more list items as needed -->
</ul>
</div>
</div>
</div>
</body>
</html>
@Maknoun
Copy link

Maknoun commented Apr 28, 2025

<style> body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } .slide { width: 1280px; min-height: 720px; overflow: hidden; position: relative; } .gradient-bg { background: linear-gradient(135deg, #f0f8ff 0%, #e6f7ff 50%, #e0f7fa 100%); } .title { font-size: 48px; font-weight: 700; background: linear-gradient(90deg, #0277bd, #00796b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; } .subtitle { font-size: 28px; color: #455a64; } .accent-bar { height: 6px; background: linear-gradient(90deg, #0277bd, #00796b); width: 100%; } .objective-box { background-color: rgba(255, 255, 255, 0.8); border-left: 5px solid #0277bd; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .icon-circle { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } </style> 
    <!-- Main Content -->
    <div class="flex-1 flex flex-col justify-center items-center py-16 px-20">
        <!-- Hospital Icon -->
        <div class="mb-6">
            <div class="icon-circle bg-white shadow-lg">
                <i class="fas fa-hospital text-4xl text-teal-600"></i>
            </div>
        </div>
        
        <!-- Title -->
        <h1 class="title text-center mb-4">Business Development Plan & Strategy</h1>
        <h2 class="subtitle text-center mb-8">Health Oasis Hospital, Riyadh</h2>
        
        <!-- Objective Box -->
        <div class="objective-box p-6 mt-8 rounded-lg max-w-3xl">
            <h3 class="text-xl font-semibold mb-3 text-gray-700">Strategic Objectives:</h3>
            <div class="flex flex-col space-y-3">
                <div class="flex items-center">
                    <div class="bg-blue-100 rounded-full p-2 mr-4">
                        <i class="fas fa-chart-line text-blue-600"></i>
                    </div>
                    <span class="text-lg">Reverse declining income</span>
                </div>
                <div class="flex items-center">
                    <div class="bg-green-100 rounded-full p-2 mr-4">
                        <i class="fas fa-user-md text-green-600"></i>
                    </div>
                    <span class="text-lg">Retain staff</span>
                </div>
                <div class="flex items-center">
                    <div class="bg-teal-100 rounded-full p-2 mr-4">
                        <i class="fas fa-cogs text-teal-600"></i>
                    </div>
                    <span class="text-lg">Modernize services</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Footer -->
    <div class="px-16 py-4 flex justify-between items-center">
        <div class="text-sm text-gray-600">
            <i class="fas fa-calendar-alt mr-1"></i> 2023
        </div>
        <div class="text-sm text-gray-600">
            <i class="fas fa-shield-alt mr-1"></i> Confidential
        </div>
    </div>
</div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment