Content Sections
- Heading with description
- Images with heading and description
- Video embed content
- Image gallery
- Heading with description (two columns)
- Social proof content
- Content card images
- Table of contents card
- Content section with logo, CTA links, image, and feature list
Choose one of these website sections to show extra content relative to the other sections on the page such as a gallery of images, description texts, and more.
Heading with description
Use this example to show a heading with a paragraph and a CTA link anywhere on your page relative to other sections.
Heading with description
html
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="max-w-screen-lg text-gray-500 sm:text-lg dark:text-gray-400">
<h2
class="mb-4 text-4xl tracking-tight font-bold text-gray-900 dark:text-white"
>
Powering innovation at
<span class="font-extrabold">200,000+</span> companies worldwide
</h2>
<p class="mb-4 font-light">
Track work across the enterprise through an open, collaborative
platform. Link issues across Jira and ingest data from other software
development tools, so your IT support and operations teams have richer
contextual information to rapidly respond to requests, incidents, and
changes.
</p>
<p class="mb-4 font-medium">
Deliver great service experiences fast - without the complexity of
traditional ITSM solutions.Accelerate critical development work,
eliminate toil, and deploy changes with ease.
</p>
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
>
Learn more
<svg
class="ml-1 w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
</section>Images with heading and description
Use this example to show a couple of images next to a heading and paragraph to provide visual impact to your users.
Images with heading and description
html
<section class="bg-white dark:bg-gray-900">
<div
class="gap-16 items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-2 lg:py-16 lg:px-6"
>
<div class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
We didn't reinvent the wheel
</h2>
<p class="mb-4">
We are strategists, designers and developers. Innovators and problem
solvers. Small enough to be simple and quick, but big enough to deliver
the scope you want at the pace you need. Small enough to be simple and
quick, but big enough to deliver the scope you want at the pace you
need.
</p>
<p>
We are strategists, designers and developers. Innovators and problem
solvers. Small enough to be simple and quick.
</p>
</div>
<div class="grid grid-cols-2 gap-4 mt-8">
<img
class="w-full rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/office-long-2.png"
alt="office content 1"
/>
<img
class="mt-4 w-full lg:mt-10 rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/office-long-1.png"
alt="office content 2"
/>
</div>
</div>
</section>Video embed content
Use this website section to show a video embedded from YouTube (or another platform) next to the content area of the heading and paragraphs.
Video embed content
html
<section class="bg-white dark:bg-gray-900">
<div
class="py-8 px-4 mx-auto max-w-screen-xl lg:px-12 sm:text-center lg:py-16"
>
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
We didn't reinvent the wheel
</h2>
<p
class="font-light text-gray-500 sm:text-lg md:px-20 lg:px-38 xl:px-48 dark:text-gray-400"
>
We are strategists, designers and developers. Innovators and problem
solvers. Small enough to be simple and quick, but big enough to deliver
the scope you want at the pace you need.
</p>
<iframe
class="mx-auto mt-8 w-full max-w-2xl h-64 rounded-lg lg:mt-12 sm:h-96"
src="https://www.youtube.com/embed/4bnJG2UDr9A"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</div>
</section>Image gallery
Use this example of an image gallery coded with Tailwind CSS to provide a strong visual impact between the website sections on your page.
Image gallery
html
<section class="bg-white dark:bg-gray-900">
<div
class="py-8 px-4 mx-auto max-w-screen-xl lg:px-12 sm:text-center lg:py-16"
>
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
We didn't reinvent the wheel
</h2>
<p
class="font-light text-gray-500 sm:text-lg md:px-20 lg:px-38 xl:px-48 dark:text-gray-400"
>
We are strategists, designers and developers. Innovators and problem
solvers. Small enough to be simple and quick, but big enough to deliver
the scope you want at the pace you need.
</p>
<div class="gap-4 mt-8 sm:grid sm:grid-cols-4 sm:mt-12">
<img
class="col-span-2 mb-4 sm:mb-0 rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-1.png"
alt="content gallery 1"
/>
<img
class="hidden col-span-1 sm:block rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-2.png"
alt="content gallery 2"
/>
<img
class="hidden col-span-1 sm:block rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-3.png"
alt="content gallery 3"
/>
<img
class="hidden col-span-1 sm:block rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-4.png"
alt="content gallery 4"
/>
<img
class="col-span-2 rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-5.png"
alt="content gallery 5"
/>
<img
class="hidden col-span-1 sm:block rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-6.png"
alt="content gallery 6"
/>
</div>
</div>
</section>Heading with description (two columns)
This example can be used to show another block of text next to the classic heading with the paragraph and CTA link version.
Heading with description (two columns)
html
<section class="bg-white dark:bg-gray-900">
<div
class="gap-16 items-center py-8 px-4 mx-auto max-w-screen-xl lg:grid lg:grid-cols-2 lg:py-16 lg:px-6"
>
<div class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Powering innovation at 200,000+ companies worldwide
</h2>
<p class="mb-4">
Empower Developers, IT Ops, and business teams to collaborate at high
velocity. Respond to changes and deliver great customer and employee
service experiences fast.
</p>
<a
href="#"
class="inline-flex items-center font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
>
Learn more
<svg
class="ml-1 w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
<div
class="mt-4 font-light text-gray-500 sm:text-lg lg:mt-0 dark:text-gray-400"
>
<p class="mb-4">
Track work across the enterprise through an open, collaborative
platform. Link issues across Jira and ingest data from other software
development tools, so your IT support and operations teams have richer
contextual information to rapidly respond to requests, incidents, and
changes.
</p>
<p>
Deliver great service experiences fast - without the complexity of
traditional ITSM solutions.Accelerate critical development work,
eliminate toil, and deploy changes with ease, with a complete audit
trail for every change.
</p>
</div>
</div>
</section>Social proof content
Use this example to show a set of statistical numbers that provide social proof to your users next to the heading and paragraphs.
Social proof content
html
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-6">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 lg:text-5xl dark:text-white"
>
Home to the software teams
</h2>
<p
class="font-light text-gray-500 sm:text-lg sm:px-8 lg:px-32 xl:px-64 dark:text-gray-400"
>
Meet your developers where they already are. GitHub is home to over 40
million developers and the world’s largest open source community.
</p>
<dl
class="grid grid-cols-2 gap-8 mx-auto mt-8 max-w-screen-md text-gray-900 lg:mt-14 sm:grid-cols-3 dark:text-white"
>
<div class="flex flex-col justify-center items-center">
<dt class="mb-2 text-4xl font-extrabold">73M+</dt>
<dd class="text-xl font-normal text-gray-500 dark:text-gray-400">
developers
</dd>
</div>
<div class="flex flex-col justify-center items-center">
<dt class="mb-2 text-4xl font-extrabold">1B+</dt>
<dd class="text-xl font-normal text-gray-500 dark:text-gray-400">
contributors
</dd>
</div>
<div class="flex flex-col justify-center items-center">
<dt class="mb-2 text-4xl font-extrabold">4M+</dt>
<dd class="text-xl font-normal text-gray-500 dark:text-gray-400">
organizations
</dd>
</div>
</dl>
</div>
</section>Content card images
Get started with this website section to show at least three cards with images relative to the descriptive heading and paragraphs.
Content card images
html
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="text-center text-gray-900">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 lg:text-5xl dark:text-white"
>
Turn collaboration into innovation
</h2>
<a
href="#"
class="inline-flex items-center text-lg font-medium text-primary-600 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-700"
>
Learn more about inner source
<svg
class="ml-1 w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
<div class="grid gap-6 mt-12 lg:mt-14 lg:gap-12 md:grid-cols-3">
<div class="flex mb-2 md:flex-col md:mb-0">
<img
class="mr-4 w-auto h-36 md:w-full md:h-auto rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/office-content-1.png"
alt="office image"
/>
<div>
<h3
class="text-xl font-bold md:mt-4 mb-2.5 text-gray-900 dark:text-white"
>
Build as one team
</h3>
<p class="text-gray-500 dark:text-gray-400">
Work seamlessly across your organization on a platform designed for
collaboration.
</p>
</div>
</div>
<div class="flex mb-2 md:flex-col md:mb-0">
<img
class="mr-4 w-auto h-36 md:w-full md:h-auto rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/office-content-2.png"
alt="office image 2"
/>
<div>
<h3
class="text-xl font-bold md:mt-4 mb-2.5 text-gray-900 dark:text-white"
>
Transform your culture
</h3>
<p class="text-gray-500 dark:text-gray-400">
Embrace innersource, iterate faster, and ship more frequently using
best tools from open source teams.
</p>
</div>
</div>
<div class="flex md:flex-col">
<img
class="mr-4 w-auto h-36 md:w-full md:h-auto rounded-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/office-content-3.png"
alt="office image 3"
/>
<div>
<h3
class="text-xl font-bold md:mt-4 mb-2.5 text-gray-900 dark:text-white"
>
Learn as you build
</h3>
<p class="text-gray-500 dark:text-gray-400">
Get insight into how your team builds today with community-backed
KPIs.
</p>
</div>
</div>
</div>
</div>
</section>Table of contents card
Use this example to show the table of contents of a book or online course based on chapters and description with a CTA button.
Table of contents card
html
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto lg:px-6 sm:py-16 lg:py-24">
<div class="text-center">
<h2
class="text-3xl font-extrabold leading-tight tracking-tight text-gray-900 sm:text-4xl dark:text-white"
>
Table of contents
</h2>
</div>
<div
class="max-w-3xl p-5 mx-auto mt-8 space-y-5 border border-gray-100 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700"
>
<div class="pb-5 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Chapter 1: Introduction to Design Principles
</h3>
<p class="mt-1 text-base font-normal text-gray-500 dark:text-gray-400">
This chapter provides an overview of the basic principles of design,
such as balance, contrast, and hierarchy. It explains how these
principles can be used to create visually pleasing and effective
designs.
</p>
</div>
<div class="pb-5 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Chapter 2: Designing for User Experience
</h3>
<p class="mt-1 text-base font-normal text-gray-500 dark:text-gray-400">
This chapter explores the concept of user experience (UX) design and
how it relates to the overall design process. It covers topics such as
user research, usability testing, and user-centered design.
</p>
</div>
<div class="pb-5 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Chapter 3: Typography in Design
</h3>
<p class="mt-1 text-base font-normal text-gray-500 dark:text-gray-400">
This chapter delves into the art and technique of typography,
including the history and evolution of type, the basics of typographic
hierarchy, and the use of typography in digital design.
</p>
</div>
<div class="pb-5 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Chapter 4: Color Theory and its Applications
</h3>
<p class="mt-1 text-base font-normal text-gray-500 dark:text-gray-400">
This chapter covers the basics of color theory and its application in
design. It includes information on color wheels, complementary colors,
color schemes, and the psychological effects of color. It also covers
color management and color spaces in digital design.
</p>
</div>
<div class="pb-5 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Chapter 5: Design for the Web
</h3>
<p class="mt-1 text-base font-normal text-gray-500 dark:text-gray-400">
This chapter will cover the basics of web design, including the
principles of responsive design, website layout, and typography, as
well as the use of HTML, CSS, and JavaScript.
</p>
</div>
<div class="">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
Chapter 6: Branding and Identity Design
</h3>
<p class="mt-1 text-base font-normal text-gray-500 dark:text-gray-400">
This chapter will explore the process of creating and maintaining a
brand, including the development of a brand strategy, the creation of
a visual identity, and the use of design elements to communicate a
brand's message.
</p>
</div>
</div>
<div class="mt-8 text-center">
<a
href="#"
title=""
class="inline-flex items-center text-lg font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Get free sample chapters
<svg
aria-hidden="true"
class="w-5 h-5 ml-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
</div>
</section>Content section with logo, CTA links, image, and feature list
This example can be used to show the logo, a couple of links, a featured image, text, and a feature list as a content section.
Content section with logo, CTA links, image, and feature list
html
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto lg:px-6 sm:py-16 lg:py-24">
<div class="text-center">
<img
class="object-contain w-auto mx-auto dark:hidden"
src="https://flowbite.s3.amazonaws.com/brand/logo-light/type/flowbite-logo.svg"
alt="Flowbite logo"
/>
<img
class="hidden object-contain w-auto mx-auto dark:block"
src="https://flowbite.s3.amazonaws.com/brand/logo-dark/type/flowbite-logo.svg"
alt="Flowbite logo dark"
/>
<div
class="flex flex-col items-center justify-center gap-4 mt-4 sm:mt-5 sm:gap-8 sm:flex-row"
>
<a
href="#"
title=""
class="inline-flex items-center text-base font-semibold leading-tight text-primary-600 hover:underline dark:text-primary-500"
>
Visit the website
<svg
aria-hidden="true"
class="w-4 h-4 ml-1.5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"
/>
<path
d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"
/>
</svg>
</a>
<a
href="#"
title=""
class="inline-flex items-center text-base font-semibold leading-tight text-primary-600 hover:underline dark:text-primary-500"
>
Let's work together
<svg
aria-hidden="true"
class="w-4 h-4 ml-1.5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
<div class="max-w-5xl mx-auto mt-8 lg:mt-16">
<img
class="w-full rounded-lg shadow-lg"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/computer-dark.png"
alt="Content image"
/>
</div>
<div class="grid grid-cols-1 gap-8 mt-8 lg:gap-16 lg:grid-cols-2 lg:mt-16">
<div>
<div>
<h3 class="text-2xl font-extrabold text-gray-900 dark:text-white">
Overview
</h3>
<p class="mt-2 text-lg font-normal text-gray-500 dark:text-gray-400">
Since 1984, Flowbite has been serving up grab-and-go frozen
daiquiris from its stores across the U.S. Its signature drinks,
souvenir cups, and discounted refills have made Flowbite synonymous
with great music, good vibes, and starting the best party in town.
</p>
</div>
<ul class="grid grid-cols-1 mt-8 sm:grid-cols-2 gap-x-4 gap-y-3">
<li class="flex items-center gap-2.5">
<svg
class="w-5 h-5 text-green-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
/>
</svg>
<span
class="text-base font-normal text-gray-500 dark:text-gray-400"
>
A/B Testing
</span>
</li>
<li class="flex items-center gap-2.5">
<svg
class="w-5 h-5 text-green-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
/>
</svg>
<span
class="text-base font-normal text-gray-500 dark:text-gray-400"
>
Craft CMS development
</span>
</li>
<li class="flex items-center gap-2.5">
<svg
class="w-5 h-5 text-green-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
/>
</svg>
<span
class="text-base font-normal text-gray-500 dark:text-gray-400"
>
UX/UI design
</span>
</li>
<li class="flex items-center gap-2.5">
<svg
class="w-5 h-5 text-green-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
/>
</svg>
<span
class="text-base font-normal text-gray-500 dark:text-gray-400"
>
Copywriting
</span>
</li>
<li class="flex items-center gap-2.5">
<svg
class="w-5 h-5 text-green-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
/>
</svg>
<span
class="text-base font-normal text-gray-500 dark:text-gray-400"
>
Brand development
</span>
</li>
<li class="flex items-center gap-2.5">
<svg
class="w-5 h-5 text-green-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
/>
</svg>
<span
class="text-base font-normal text-gray-500 dark:text-gray-400"
>
Graphic design
</span>
</li>
<li class="flex items-center gap-2.5">
<svg
class="w-5 h-5 text-green-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
/>
</svg>
<span
class="text-base font-normal text-gray-500 dark:text-gray-400"
>
Front-end development
</span>
</li>
<li class="flex items-center gap-2.5">
<svg
class="w-5 h-5 text-green-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
/>
</svg>
<span
class="text-base font-normal text-gray-500 dark:text-gray-400"
>
SEO
</span>
</li>
</ul>
</div>
<div class="space-y-8">
<div>
<h3 class="text-2xl font-extrabold text-gray-900 dark:text-white">
Background
</h3>
<p class="mt-2 text-lg font-normal text-gray-500 dark:text-gray-400">
Come 2021, Flowbite had expanded to over 40 locations. The brand’s
digital presence existed, but it lacked strategy. Although its
target market of 21-30 year-olds was as engaged (and as loyal) as
ever, the brand had outgrown its amateur look of the early '00s and
the family-owned business vibes. It needed to show it was a strong
brand moving in a new direction - and it was heading there fast.
</p>
</div>
<div>
<h3 class="text-2xl font-extrabold text-gray-900 dark:text-white">
The challenge
</h3>
<p class="mt-2 text-lg font-normal text-gray-500 dark:text-gray-400">
Flowbite’s new website would set the tone for all future marketing
initiatives, so the brand needed something to showcase its new
identity as soon as possible. A tight timeline, paired with the fact
that the new management team were still exploring how to shift the
brand from what it used to be to what it needed to be, meant that
working collaboratively was a must.
</p>
</div>
</div>
</div>
</div>
</section>