<!-- Hero Section -->
<section class="text-center mb-12">
    <h1 class="text-4xl font-bold mb-4">Welcome to My Website</h1>
    <p class="text-gray-700 mb-8">This is a sample website using Tailwind CSS.</p>
    <a href="#" class="bg-blue-500 text-white px-6 py-3 rounded-full hover:bg-blue-600 transition duration-300">Get Started</a>
</section>

<!-- Features Section -->
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
    <div class="bg-white shadow-md p-6 rounded-lg">
    <h2 class="text-xl font-semibold mb-2">Feature One</h2>
    <p class="text-gray-600">Description of the first feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="bg-white shadow-md p-6 rounded-lg">
    <h2 class="text-xl font-semibold mb-2">Feature Two</h2>
    <p class="text-gray-600">Description of the second feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="bg-white shadow-md p-6 rounded-lg">
    <h2 class="text-xl font-semibold mb-2">Feature Three</h2>
    <p class="text-gray-600">Description of the third feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</section>

<!-- About Section -->
<section class="bg-gray-100 p-8 rounded-lg mb-12">
    <h2 class="text-2xl font-semibold mb-4">About Us</h2>
    <p class="text-gray-700">This section contains information about the company. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel dolor massa. Donec tincidunt, eros ac laoreet tempor, libero purus consectetur sapien, id hendrerit arcu metus id purus.</p>
</section>

<!-- Contact Section -->
<section class="text-center">
    <h2 class="text-2xl font-semibold mb-4">Contact Us</h2>
    <p class="text-gray-700 mb-8">Have any questions? Reach out to us from our contact page.</p>
    <a href="#" class="bg-green-500 text-white px-6 py-3 rounded-full hover:bg-green-600 transition duration-300">Contact Us</a>
</section>
<script src="js/main.js"></script>