visit

to known any thin

This tailwind example is contributed by Nishimwe Jeanine, on 29-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Tag Cloud

Author Nishimwe Jeanine

474

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visit Rwanda - Land of a Thousand Hills</title>
    <style>
        /* Global Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: #f9f9f9;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header Styles */
        header {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                        url('https://images.unsplash.com/photo-1562565659-a4f96032d2e0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            height: 100vh;
            color: white;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .logo {
            width: 150px;
            margin-bottom: 20px;
        }
        
        h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .tagline {
            font-size: 1.5rem;
            max-width: 800px;
            margin-bottom: 30px;
        }
        
        .btn {
            display: inline-block;
            background: #00a651; /* Rwanda green */
            color: white;
            padding: 12px 30px;
            text-decoration: none;
            border-radius: 30px;
            font-weight: bold;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .btn:hover {
            background: #008a43;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        /* Navigation */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            padding: 20px 0;
            z-index: 1000;
        }
        
        nav .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .nav-logo {
            width: 100px;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 30px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        
        .nav-links a:hover {
            color: #00a651;
        }
        
        /* About Section */
        .about {
            padding: 100px 0;
            background-color: white;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
            font-size: 2.5rem;
            color: #00a651;
        }
        
        .about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }
        
        .about-text {
            flex: 1;
        }
        
        .about-image {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .about-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
        }
        
        .about-image:hover img {
            transform: scale(1.05);
        }
        
        /* Attractions Section */
        .attractions {
            padding: 100px 0;
            background-color: #f5f5f5;
        }
        
        .attractions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .attraction-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .attraction-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }
        
        .attraction-image {
            height: 200px;
            overflow: hidden;
        }
        
        .attraction-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .attraction-card:hover .attraction-image img {
            transform: scale(1.1);
        }
        
        .attraction-info {
            padding: 20px;
        }
        
        .attraction-info h3 {
            margin-bottom: 10px;
            color: #00a651;
        }
        
        /* Footer */
        footer {
            background-color: #222;
            color: white;
            padding: 60px 0 20px;
        }
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }
        
        .footer-column h3 {
            color: #00a651;
            margin-bottom: 20px;
            font-size: 1.2rem;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column ul li {
            margin-bottom: 10px;
        }
        
        .footer-column a {
            color: #ddd;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-column a:hover {
            color: #00a651;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
        }
        
        .social-links a {
            color: white;
            font-size: 1.5rem;
        }
        
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #444;
            color: #aaa;
            font-size: 0.9rem;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            h1 {
                font-size: 2.5rem;
            }
            
            .tagline {
                font-size: 1.2rem;
            }
            
            .about-content {
                flex-direction: column;
            }
            
            .nav-links {
                display: none;
            }
        }
    </style>
</head>
<body>
    
    <nav>
        <div class="container">
            <img src="https://www.visitrwanda.com/wp-content/themes/visitrwanda/images/logo.png" alt="Visit Rwanda Logo" class="nav-logo">
            <ul class="nav-links">
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About Rwanda</a></li>
                <li><a href="#attractions">Attractions</a></li>
                <li><a href="#plan">Plan Your Trip</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </nav>
    
    
    <header id="home">
        <img src="https://www.visitrwanda.com/wp-content/themes/visitrwanda/images/logo.png" alt="Visit Rwanda Logo" class="logo">
        <h1>Discover Rwanda</h1>
        <p class="tagline">Experience the breathtaking beauty, vibrant culture, and incredible wildlife of the Land of a Thousand Hills</p>
        <a href="#plan" class="btn">Plan Your Visit</a>
    </header>
    
    
    <section class="about" id="about">
        <div class="container">
            <h2 class="section-title">About Rwanda</h2>
            <div class="about-content">
                <div class="about-text">
                    <p>Rwanda, known as the "Land of a Thousand Hills," is a country of stunning landscapes, warm hospitality, and remarkable progress. Located in East Africa, Rwanda has emerged as one of Africa's most remarkable success stories, transforming itself into a stable, united, and ambitious nation.</p>
                    <p>The country offers visitors a unique combination of wildlife experiences, cultural encounters, and breathtaking scenery. From tracking endangered mountain gorillas in Volcanoes National Park to exploring the vibrant capital city of Kigali, Rwanda provides unforgettable experiences for every traveler.</p>
                    <p>Rwanda is also a leader in conservation and sustainable tourism, with initiatives that protect its natural heritage while benefiting local communities. The country's cleanliness, safety, and efficient infrastructure make it an increasingly popular destination for international visitors.</p>
                </div>
                <div class="about-image">
                    <img src="https://images.unsplash.com/photo-1562565659-a4f96032d2e0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Rwanda landscape">
                </div>
            </div>
        </div>
    </section>
    
    
    <section class="attractions" id="attractions">
        <div class="container">
            <h2 class="section-title">Must-See Attractions</h2>
            <div class="attractions-grid">
                <div class="attraction-card">
                    <div class="attraction-image">
                        <img src="https://images.unsplash.com/photo-1581337204873-ef36aa186caa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Mountain Gorillas">
                    </div>
                    <div class="attraction-info">
                        <h3>Mountain Gorillas</h3>
                        <p>Experience the unforgettable thrill of coming face-to-face with endangered mountain gorillas in their natural habitat in Volcanoes National Park.</p>
                    </div>
                </div>
                
                <div class="attraction-card">
                    <div class="attraction-image">
                        <img src="https://images.unsplash.com/photo-1566438480901-87f511406146?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Nyungwe Forest">
                    </div>
                    <div class="attraction-info">
                        <h3>Nyungwe Forest</h3>
                        <p>Explore one of Africa's oldest rainforests, home to chimpanzees, colobus monkeys, and over 300 bird species, with breathtaking canopy walks.</p>
                    </div>
                </div>
                
                <div class="attraction-card">
                    <div class="attraction-image">
                        <img src="https://images.unsplash.com/photo-1566438480901-87f511406146?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Lake Kivu">
                    </div>
                    <div class="attraction-info">
                        <h3>Lake Kivu</h3>
                        <p>Relax on the shores of this beautiful freshwater lake, enjoying water sports, island hopping, and stunning sunsets over the water.</p>
                    </div>
                </div>
                
                <div class="attraction-card">
                    <div class="attraction-image">
                        <img src="https://images.unsplash.com/photo-1566438480901-87f511406146?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Kigali City">
                    </div>
                    <div class="attraction-info">
                        <h3>Kigali City</h3>
                        <p>Discover Rwanda's clean and vibrant capital, with its memorial sites, bustling markets, thriving art scene, and excellent dining options.</p>
                    </div>
                </div>
                
                <div class="attraction-card">
                    <div class="attraction-image">
                        <img src="https://images.unsplash.com/photo-1566438480901-87f511406146?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Akagera National Park">
                    </div>
                    <div class="attraction-info">
                        <h3>Akagera National Park</h3>
                        <p>Go on safari in this beautiful park, home to lions, elephants, giraffes, zebras, and numerous antelope species in a picturesque landscape.</p>
                    </div>
                </div>
                
                <div class="attraction-card">
                    <div class="attraction-image">
                        <img src="https://images.unsplash.com/photo-1566438480901-87f511406146?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Cultural Experiences">
                    </div>
                    <div class="attraction-info">
                        <h3>Cultural Experiences</h3>
                        <p>Engage with Rwanda's rich traditions through dance performances, artisan visits, and community tourism initiatives across the country.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    
    <footer id="contact">
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>Visit Rwanda</h3>
                    <p>Discover the beauty, culture, and wildlife of Rwanda - the Land of a Thousand Hills.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About Rwanda</a></li>
                        <li><a href="#attractions">Attractions</a></li>
                        <li><a href="#plan">Plan Your Trip</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                
                <div class="footer-column">
                    <h3>Travel Info</h3>
                    <ul>
                        <li><a href="#">Visa Requirements</a></li>
                        <li><a href="#">Getting Here</a></li>
                        <li><a href="#">Accommodation</a></li>
                        <li><a href="#">Travel Tips</a></li>
                        <li><a href="#">FAQs</a></li>
                    </ul>
                </div>
                
                <div class="footer-column">
                    <h3>Contact Us</h3>
                    <ul>
                        <li>KN 5 Ave, Kigali</li>
                        <li>Rwanda</li>
                        <li>Email: info@visitrwanda.com</li>
                        <li>Phone: +250 787 834 567</li>
                    </ul>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 2023 Visit Rwanda. All rights reserved.</p>
            </div>
        </div>
    </footer>
    
    
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</body>
</html>

Related Examples

Responsive list
Horizontal list of items

Author:
Sophia Baker

3 years ago

10.6k
Tag cloud with Javascript

Author:
Charlotte Dupont

3 years ago

10.6k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

3 years ago

13.2k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
SANJAY SINGH GARIYA

7 months ago

1.1k
Tag Cloud
Word/Tag cloud

Author:
Prajwal Hallale

3 years ago

10.9k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

10 months ago

1.9k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

10 months ago

1.3k
Tag Cloud
Tag cloud with sub-sections

Author:
Prajwal Hallale

2 years ago

13k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

1 year ago

1.9k
Tag/Button Cloud
Responsive tag cloud. Made with Flex-Box

Author:
TailwindFlex

3 years ago

12k
User list
User list

Author:
Anonymous

8 months ago

467
Button cloud for categories,tags etc

Author:
Kris Showen

2 years ago

13.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components