Conversation with Merlin [email protected] · Thu Dec 14 2023

create a webpage using html and tailwind css similar to this image, give the full code. also add minimal dark mode toggle icon (should work - switch between light mode and dark mode):

Here is an example of how you could create a webpage similar to the image you provided using HTML and Tailwind CSS:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Holiday Party</title>
    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container mx-auto p-4 md:p-8">
        <div class="bg-white rounded-xl border-2 border-gray-500 dark:border-gray-900 hover:border-gray-100 dark:hover:border-gray-50 hover:shadow-lg transition ease-in-out duration-150">
            <div class="text-gray-800 font-bold text-2xl mb-4 dark:text-gray-50">Holiday Party</div>
            <div class="text-gray-800 font-medium text-base mb-4 dark:text-gray-50">You have no upcoming events. Why not host one?</div>
            <button class="py-2 px-4 bg-indigo-500 hover:bg-indigo-600 text-white rounded-lg mr-4 dark:bg-indigo-900 dark:hover:bg-indigo-800 transition ease-in-out duration-150">
                Host a Holiday Party
            </button>
            <button class="py-2 px-4 bg-white hover:bg-gray-200 text-gray-800 rounded-lg rounded-t-none mr-4 dark:bg-gray-900 dark:hover:bg-gray-800 transition ease-in-out duration-150">
                Explore Pricing
            </button>
            <button class="py-2 px-4 bg-white hover:bg-gray-200 text-gray-800 rounded-lg rounded-t-none dark:bg-gray-900 dark:hover:bg-gray-800 transition ease-in-out duration-150">
                Help
            </button>
        </div>
    </div>
</body>
</html>

CSS:

/* style.css */

.card {
    position: relative;
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    box-sizing: border-box;
}

.card .text-content {
    position: relative;
    margin: 0 auto;
    padding: 20px;
    color: #333;
    text-align: center;
}

.card .text-content h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.card .text-content p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.card .text-content button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: inline-block;
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

.card .text-content button:hover {
    background-color: #45