Bold Horizon Features Features Block - Let's templates
Unlock every premium block and template with All-Access from €20 / 3 months, cancel anytime. Get All-Access
All blocks
Free Features

Bold Horizon Features

A features block extracted from the Bold Horizon template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.

0 7
Demo Download
Bold Horizon Features preview
bold-horizon.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        window.FontAwesomeConfig = {
          autoReplaceSvg: 'nest'
        };
      </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bold Horizon Features | Tailwind CSS UI Block</title>
    <meta name="description" content="A features block extracted from the Bold Horizon template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.">
    <meta name="keywords" content="Bold Horizon, Tailwind CSS template, HTML website template, business transformation, management consulting, case study landing page, responsive corporate design">
    <meta name="author" content="Let's templates">
    <link rel="canonical" href="">

    <meta property="og:type" content="product">
    <meta property="og:site_name" content="Let's templates">
    <meta property="og:locale" content="en_US">
    <meta property="og:url" content="">
    <meta property="og:title" content="Bold Horizon | Tailwind CSS Business Transformation Template">
    <meta property="og:description" content="A bold Tailwind CSS consulting template for business transformation firms, case studies, leadership insights, and corporate strategy teams.">
    <meta property="og:image" content="">
    <meta property="og:image:alt" content="Bold Horizon template preview">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="">
    <meta name="twitter:title" content="Bold Horizon | Tailwind CSS Business Transformation Template">
    <meta name="twitter:description" content="A bold Tailwind CSS consulting template for business transformation firms, case studies, leadership insights, and corporate strategy teams.">
    <meta name="twitter:image" content="">
    <meta name="twitter:image:alt" content="Bold Horizon template preview">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;700;900&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        html {
            overflow-x: hidden;
        }
        body {
            font-family: 'Inter', sans-serif;
            background-color: #ffffff;
            color: #000000;
            overflow-x: hidden;
        }
        h1, h2, h3, .font-bold-title {
            font-family: 'Archivo', sans-serif;
            text-transform: uppercase;
        }
        .text-huge {
            font-size: clamp(2.75rem, 11vw, 18rem);
            line-height: 0.85;
            letter-spacing: -0.04em;
        }
        .text-mega {
            font-size: clamp(2rem, 7.5vw, 8rem);
            line-height: 0.92;
            letter-spacing: -0.03em;
        }
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>
</head>
<body class="antialiased overflow-x-hidden">
<!-- block:start features -->
    <section id="case-study" class="py-16 md:py-32 bg-[#f9f9f9] overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6">
            <div class="text-center mb-10 md:mb-16">
                <span class="text-xs font-bold uppercase tracking-widest mb-4 block">New Transformation Case</span>
                <h2 class="text-mega font-black px-2">Transforming<br>Together</h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-center">
                <div class="md:col-span-3 space-y-4 order-2 md:order-1">
                    <div class="text-2xl font-black">JUN, 2022</div>
                    <div class="text-[10px] font-bold uppercase tracking-widest border-b border-black pb-2">Project Kickoff</div>
                    <p class="text-xs leading-relaxed text-neutral-600">
                        Cocoon Retail Group, a global retail company, was struggling with declining profitability due to outdated digital infrastructure and fragmented data systems. Their operations lacked transparency, decision-making was slow, and employees were unable to access reliable insights in real time.
                    </p>
                </div>

                <div class="md:col-span-6 relative aspect-[3/4] overflow-hidden order-1 md:order-2">
                    <img class="w-full h-full object-cover grayscale" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_27ffef5a52_7c10caed4f7c2276.png" alt="two male professionals in stylish suits standing together, minimal high-fashion photography style" />
                    <div class="absolute bottom-6 sm:bottom-8 left-0 right-0 text-center px-4">
                        <div class="text-white text-xl sm:text-2xl font-black italic">COCOON</div>
                        <div class="text-white text-[10px] uppercase tracking-[0.25em] sm:tracking-[0.4em]">Retail Group</div>
                    </div>
                </div>

                <div class="md:col-span-3 space-y-4 text-left md:text-right order-3">
                    <div class="text-2xl font-black">NOV, 2022</div>
                    <div class="text-[10px] font-bold uppercase tracking-widest border-b border-black pb-2">Project Completion</div>
                    <p class="text-xs leading-relaxed text-neutral-600">
                        As a result of the transformation, Cocoon Retail Group achieved greater efficiency across all business operations and significantly improved transparency in decision-making. The new digital ecosystem allowed teams to collaborate more effectively and rely on accurate, real-time insights.
                    </p>
                </div>
            </div>

            <div class="max-w-3xl mx-auto text-center mt-12 md:mt-24 px-2">
                <p class="text-lg sm:text-xl md:text-2xl italic font-light leading-relaxed mb-8 md:mb-12">
                    After implementing a streamlined digital ecosystem, BrightMart gained real-time visibility across all operations, reduced costs by 18%, and accelerated decision-making. At the same time, the company introduced a sustainability framework that cut carbon emissions by 25% within the first year.
                </p>
                <a href="#" class="bg-black text-white px-8 py-3 rounded-full text-[10px] uppercase font-bold tracking-widest hover:bg-neutral-800 transition-colors">More Cases</a>
            </div>
        </div>
    </section>
    <!-- block:end features -->
<script>
        (function () {
            var button = document.getElementById('hero-menu-button');
            var navigation = document.getElementById('hero-navigation');
            var iconOpen = document.getElementById('hero-menu-icon-open');
            var iconClose = document.getElementById('hero-menu-icon-close');
            if (!button || !navigation) return;

            function setHeroMenu(open) {
                navigation.classList.toggle('hidden', !open);
                navigation.classList.toggle('flex', open);
                button.setAttribute('aria-expanded', String(open));
                button.setAttribute('aria-label', open ? 'Close navigation' : 'Open navigation');
                if (iconOpen && iconClose) {
                    iconOpen.classList.toggle('hidden', open);
                    iconClose.classList.toggle('hidden', !open);
                }
            }

            button.addEventListener('click', function (event) {
                event.stopPropagation();
                setHeroMenu(navigation.classList.contains('hidden'));
            });

            navigation.querySelectorAll('a').forEach(function (link) {
                link.addEventListener('click', function () {
                    if (window.matchMedia('(max-width: 767px)').matches) {
                        setHeroMenu(false);
                    }
                });
            });

            document.addEventListener('click', function (event) {
                if (window.matchMedia('(max-width: 767px)').matches &&
                    navigation.classList.contains('flex') &&
                    !navigation.contains(event.target) &&
                    !button.contains(event.target)) {
                    setHeroMenu(false);
                }
            });
        })();
    </script>
</body>
</html>

From this template

Bold Horizon screenshot Free

Agency

Bold Horizon

Unlimited access to all products

Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.

€20 / 3 months or €60 / year
Get Unlimited Access