beardedtek/flowbite-beardedtek.com
1
0
Fork 0
mirror of https://github.com/BeardedTek/flowbite-beardedtek.com.git synced 2025-12-06 05:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
720de92cafde3205282e4a0b96615a84c67be2ed
flowbite-beardedtek.com/content/landing/physical-product.html
BeardedTek 47f065dfab INITIAL COMMIT
2025-04-15 14:55:06 -08:00

1113 lines
69 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Tailwind CSS Physical Product Landing Page - Flowbite
description: Get started with a collection of over 53 page templates based on Tailwind CSS for Marketing UI purposes including landing pages, contact pages, about pages, and more
layout: main
navbar: default
---
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24 pt-20 sm:pt-24 lg:pt-32">
<div class="flex flex-col items-center gap-8 xl:gap-16 lg:flex-row">
<div class="text-center md:max-w-3xl lg:text-left xl:shrink-0">
<div>
<h2 class="text-3xl font-extrabold leading-none tracking-tight text-gray-900 sm:text-5xl dark:text-white">
Designing Interfaces:
<span class="lg:block">
A User-Centered Approach
</span>
</h2>
<p class="mt-4 text-base font-normal text-gray-500 md:max-w-3xl md:mx-auto sm:text-xl dark:text-gray-400">
This book covers the latest design principles and techniques, including responsive design, mobile interface
design, and
user research methodologies.
</p>
</div>
<div class="flex items-center justify-center gap-4 mt-8 lg:justify-start">
<a href="#" title=""
class="px-5 py-3 text-base font-medium text-center text-white bg-blue-700 rounded-lg shrink-0 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
role="button">
Buy now for $99
</a>
<a href="#" title=""
class="inline-flex items-center px-5 py-3 text-base font-medium text-center text-gray-900 bg-white border border-gray-200 rounded-lg shrink-0 focus:outline-none hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
role="button">
Free preview
<svg aria-hidden="true" class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</a>
</div>
<div class="flex items-center justify-center gap-5 mt-8 lg:justify-start sm:gap-6">
<div class="flex -space-x-3 overflow-hidden">
<img class="inline-block w-8 h-8 border border-white rounded-full dark:border-gray-900"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/neil-sims.png" alt="">
<img class="inline-block w-8 h-8 border border-white rounded-full dark:border-gray-900"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt="">
<img class="inline-block w-8 h-8 border border-white rounded-full dark:border-gray-900"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gough.png" alt="">
<img class="inline-block w-8 h-8 border border-white rounded-full dark:border-gray-900"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png" alt="">
</div>
<div class="w-px h-8 bg-gray-200 dark:bg-gray-700"></div>
<div>
<div class="flex items-center gap-1.5">
<div class="flex items-center gap-0.5">
<svg class="w-5 h-5 text-yellow-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg class="w-5 h-5 text-yellow-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg class="w-5 h-5 text-yellow-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg class="w-5 h-5 text-yellow-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
<svg class="w-5 h-5 text-yellow-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
</div>
<span class="text-base font-normal text-gray-500 dark:text-gray-400">
5.0
</span>
</div>
<p class="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
Rated Best Over <span class="font-semibold text-gray-900 dark:text-white">15.7k</span> Reviews
</p>
</div>
</div>
</div>
<div>
<img class="object-contain w-auto rounded-2xl shadow-lg" src="{{< baseurl >}}/images/hero/book-cover.png" alt="Book cover">
</div>
</div>
</div>
</section>
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 pb-8 mx-auto sm:pb-16 lg:pb-24">
<h2 class="text-2xl font-bold leading-tight text-center text-gray-900 dark:text-white">
My background
</h2>
<dl
class="grid max-w-5xl gap-8 px-4 py-6 mx-auto mt-8 text-center text-gray-900 bg-white border border-gray-200 rounded-lg shadow-lg sm:grid-cols-2 md:grid-cols-4 dark:text-white dark:border-gray-700 dark:bg-gray-800">
<div class="flex flex-col items-center justify-center">
<dt class="mb-2 text-3xl font-extrabold sm:text-4xl">73M+</dt>
<dd class="text-gray-500 dark:text-gray-400">Downloads</dd>
</div>
<div class="flex flex-col items-center justify-center border-gray-200 lg:border-l dark:border-gray-700">
<dt class="mb-2 text-3xl font-extrabold sm:text-4xl">1M+</dt>
<dd class="text-gray-500 dark:text-gray-400">Likes</dd>
</div>
<div class="flex flex-col items-center justify-center border-gray-200 lg:border-l dark:border-gray-700">
<dt class="mb-2 text-3xl font-extrabold sm:text-4xl">90k+</dt>
<dd class="text-gray-500 dark:text-gray-400">Dribbble followers</dd>
</div>
<div class="flex flex-col items-center justify-center border-gray-200 lg:border-l dark:border-gray-700">
<dt class="mb-2 text-3xl font-extrabold sm:text-4xl">4+</dt>
<dd class="text-gray-500 dark:text-gray-400">Written books</dd>
</div>
</dl>
</div>
</section>
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
<div class="space-y-20">
<div class="items-center gap-8 xl:gap-16 md:grid md:grid-cols-2">
<img class="w-full rounded-lg shadow-2xl" src="{{< baseurl >}}/images/book-mockup.png" alt="">
<div class="mt-4 md:mt-0">
<h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">The Book
</h2>
<p class="mb-6 text-gray-500 md:text-lg dark:text-gray-400"><span
class="font-bold text-gray-900 dark:text-white">Designing Interfaces: A User-Centered
Approach</span> is a valuable resource for anyone interested in learning about the
principles and techniques of design.
</p>
<p class="mb-6 text-gray-500 md:text-lg dark:text-gray-400">
The book covers a wide range of topics, from the basics of design principles such as balance, contrast, and
hierarchy,
to more advanced topics such as user experience design, typography, and color theory.
</p>
<p class="mb-6 text-gray-500 md:text-lg dark:text-gray-400">
It also delves into specific areas of design such as web design, branding, and design thinking. With clear
explanations,
practical examples, and helpful illustrations, this book is an essential guide for aspiring designers and
anyone
looking
to improve their design skills.
</p>
<div class="flex items-center gap-4">
<a href="#"
class="inline-flex items-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900">
Get free two chapters
<svg class="w-4 h-4 ml-2 -mr-1" 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>
<a href="#" title="" class="text-gray-900 border border-gray-200 hover:bg-gray-100 focus:ring-gray-100 hover:text-primary-700 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-800 justify-center inline-flex items-center focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center" role="button">
Buy now
</a>
</div>
</div>
</div>
<div class="items-center gap-8 xl:gap-16 md:grid md:grid-cols-2">
<div class="mb-4 md:mb-0">
<h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
Harcover & Digital Book
</h2>
<p class="mb-6 text-gray-500 md:text-lg dark:text-gray-400">
<span class="font-bold text-gray-900 dark:text-white">The hardcover book</span>, the pages are sewn
together, which makes the book more durable and resistant to wear
and tear.
</p>
<p class="mb-6 text-gray-500 md:text-lg dark:text-gray-400">
Hardcover books are often used for reference books, textbooks, and other books that are likely to be used
frequently.
</p>
<p class="text-gray-500 md:text-lg dark:text-gray-400">
<span class="font-bold text-gray-900 dark:text-white">Our e-book</span> can be read on electronic devices
such as smartphones, tablets, e-readers, and computers, and
include
multimedia elements such as videos, audio, and interactive graphics, and they can be easily shared, stored
and accessed
from anywhere.
</p>
</div>
<img class="w-full dark:hidden" src="{{< baseurl >}}/images/digital-book-mockup.png" alt="tablet mockup light">
<img class="w-full hidden dark:block" src="{{< baseurl >}}/images/digital-book-mockup-dark.png" alt="tablet mockup dark">
</div>
<div class="items-center gap-8 xl:gap-16 md:grid md:grid-cols-2">
<img class="w-full rounded-lg shadow-lg" src="{{< baseurl >}}/images/author-image.png" alt="">
<div class="mt-4 md:mt-0">
<h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
Author
</h2>
<p class="mb-6 text-gray-500 md:text-lg dark:text-gray-400"><span
class="font-bold text-gray-900 dark:text-white">Designing Interfaces: A User-Centered
Approach</span> Hello I’am Leslie Livingston, the author behind this book.
</p>
<p class="mb-6 text-gray-500 md:text-lg dark:text-gray-400">
It includes all of the commonly used components that a website requires, such as buttons, dropdowns,
navigation bars,
modals, but also some more advanced interactive elements such as datepickers.
</p>
<p class="mb-6 text-gray-500 md:text-lg dark:text-gray-400">
All of the elements are built using the utility classes from Tailwind CSS and vanilla JavaScript.
</p>
<a href="#" title=""
class="text-gray-900 border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:ring-gray-100 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-800 justify-center inline-flex items-center focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center "
role="button">
<svg aria-hidden="true" class="w-5 h-5 mr-2 -ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
fill="currentColor">
<path
d="M19.633 7.997c.013.175.013.349.013.523 0 5.325-4.053 11.461-11.46 11.461-2.282 0-4.402-.661-6.186-1.809.324.037.636.05.973.05a8.07 8.07 0 0 0 5.001-1.721 4.036 4.036 0 0 1-3.767-2.793c.249.037.499.062.761.062.361 0 .724-.05 1.061-.137a4.027 4.027 0 0 1-3.23-3.953v-.05c.537.299 1.16.486 1.82.511a4.022 4.022 0 0 1-1.796-3.354c0-.748.199-1.434.548-2.032a11.457 11.457 0 0 0 8.306 4.215c-.062-.3-.1-.611-.1-.923a4.026 4.026 0 0 1 4.028-4.028c1.16 0 2.207.486 2.943 1.272a7.957 7.957 0 0 0 2.556-.973 4.02 4.02 0 0 1-1.771 2.22 8.073 8.073 0 0 0 2.319-.624 8.645 8.645 0 0 1-2.019 2.083z">
</path>
</svg>
Follow on Twitter
</a>
</div>
</div>
</div>
</div>
</section>
<section class="border-t border-b border-gray-100 bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<div class="max-w-screen-xl px-4 py-8 mx-auto 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 mx-auto mt-8 space-y-5">
<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-12 text-center">
<a href="#" title=""
class="inline-flex items-center text-lg font-medium text-primary-700 hover:underline dark:text-primary-500">
Get free sample chapters
<svg aria-hidden="true" class="w-4 h-4 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>
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
<div class="max-w-screen-md mx-auto text-center">
<h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">Testimonials
</h2>
<p class="mb-8 text-gray-500 lg:mb-16 dark:text-gray-400 sm:text-xl">Hear from readers about the impact
and value of this must-read book</p>
</div>
<div class="grid gap-6 lg:grid-cols-3">
<div class="space-y-6">
<figure class="p-6 rounded-sm bg-gray-50 dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Solid foundation for any project</h3>
<p class="my-4">"This is a very complex and beautiful set of elements. Under the hood it comes with the best
things from 2 different worlds: Figma and Tailwind.”</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img class="rounded-full w-9 h-9"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png"
alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white">
<div>Bonnie Green</div>
<div class="text-sm text-gray-500 dark:text-gray-400">CTO at Open AI</div>
</div>
</figcaption>
</figure>
<figure class="p-6 rounded-sm bg-gray-50 dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">A must-have for designers</h3>
<p class="my-4">"This is a very complex and beautiful set of elements. Under the hood it comes with the best
things from 2 different worlds: Figma and Tailwind.”</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img class="rounded-full w-9 h-9"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/karen-nelson.png"
alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white">
<div>Lana Byrd</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Software Engineer at Tesla</div>
</div>
</figcaption>
</figure>
<figure class="p-6 rounded-sm bg-gray-50 dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Speechless with how easy this was to
integrate</h3>
<p class="my-4">"I recently got my hands on Flowbite Pro, and holy crap, I'm speechless with how easy this
was to integrate within my application. Most templates are a pain, code is scattered, and near impossible
to theme."</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img class="rounded-full w-9 h-9"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white">
<div>Jese Leos</div>
<div class="text-sm text-gray-500 dark:text-gray-400">CEO at Oracle</div>
</div>
</figcaption>
</figure>
</div>
<div class="space-y-6">
<figure class="p-6 rounded-sm bg-gray-50 dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Efficient Collaborating</h3>
<p class="my-4">"Flowbite is just awesome. It contains tons of predesigned components and pages starting
from login screen to complex dashboard. Perfect choice for your next SaaS application.”</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img class="rounded-full w-9 h-9"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/joseph-mcfall.png"
alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white">
<div>Joseph McFall</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Junior Designer at Adobe</div>
</div>
</figcaption>
</figure>
<figure class="p-6 rounded-sm bg-gray-50 dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mindblowing workflow and variants</h3>
<p class="my-4">"Flowbite provides a robust set of design tokens and components based on the popular
Tailwind CSS framework.</p>
<p class="my-4">From the most used UI components like forms and navigation bars to the whole app screens
designed both for desktop and mobile, this UI kit provides a solid foundation for any project.”</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img class="rounded-full w-9 h-9"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/helene-engels.png"
alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white">
<div>Helene Engels</div>
<div class="text-sm text-gray-500 dark:text-gray-400">CFO at Microsoft</div>
</div>
</figcaption>
</figure>
<figure class="p-6 rounded-sm bg-gray-50 dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Perfect choice for a SaaS application</h3>
<p class="my-4">"Flowbite provides a robust set of design tokens and components based on the popular
Tailwind CSS framework.</p>
<p class="my-4">From the most used UI components like forms and navigation bars to the whole app screens
designed both for desktop and mobile, this UI kit provides a solid foundation for any project.”</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img class="rounded-full w-9 h-9"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/sofia-mcguire.png"
alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white">
<div>Leslie Livingston</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Creative Director at Apple</div>
</div>
</figcaption>
</figure>
</div>
<div class="space-y-6">
<figure class="p-6 rounded-sm bg-gray-50 dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Solid foundation for any project</h3>
<p class="my-4">"I recently got my hands on Flowbite Pro, and holy crap, I'm speechless with how easy this
was to integrate within my application. Most templates are a pain, code is scattered, and near impossible
to theme."</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img class="rounded-full w-9 h-9"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png"
alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white">
<div>Michael Gough</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Front-end engineer at Meta</div>
</div>
</figcaption>
</figure>
<figure class="p-6 rounded-sm bg-gray-50 dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mindblowing workflow and variants</h3>
<p class="my-4">"Flowbite is just awesome. It contains tons of predesigned components and pages starting
from login screen to complex dashboard. Perfect choice for your next SaaS application.”</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img class="rounded-full w-9 h-9"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/neil-sims.png" alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white">
<div>Neil Sims</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Software architect at Amazon</div>
</div>
</figcaption>
</figure>
<figure class="p-6 rounded-sm bg-gray-50 dark:bg-gray-800">
<blockquote class="text-sm text-gray-500 dark:text-gray-400">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Speechless with how easy this was to
integrate</h3>
<p class="my-4">"This is a very complex and beautiful set of elements. Under the hood it comes with the best
things from 2 different worlds: Figma and Tailwind.”</p>
</blockquote>
<figcaption class="flex items-center space-x-3">
<img class="rounded-full w-9 h-9"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/robert-brown.png"
alt="profile picture">
<div class="space-y-0.5 font-medium dark:text-white">
<div>Robert Brown</div>
<div class="text-sm text-gray-500 dark:text-gray-400">Junior developer at SAP</div>
</div>
</figcaption>
</figure>
</div>
</div>
<div class="mt-8 text-center sm:mt-12 lg:mt-16">
<a href="#" title="" class="text-gray-900 border border-gray-200 hover:bg-gray-100 focus:ring-gray-100 hover:text-primary-700 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700 dark:bg-gray-800 dark:hover:text-white dark:focus:ring-gray-800 justify-center inline-flex items-center focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center" role="button">
View more
</a>
</div>
</div>
</section>
<section class="border-t border-b border-gray-100 bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
<div class="items-center gap-8 lg:grid lg:grid-cols-2 xl:gap-16">
<div class="text-gray-500 sm:text-lg">
<h2 class="mb-4 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">Why you should
buy our
book?
</h2>
<p class="mb-8 lg:text-xl dark:text-gray-400">I write this book based on research, data, and best
practices in the field providing practical guidance and examples
that readers can apply in their own projects.</p>
<div class="grid gap-8 py-8 border-t border-gray-200 lg:grid-cols-1 dark:border-gray-700 sm:grid-cols-2">
<div class="flex">
<div
class="flex items-center justify-center w-12 h-12 mr-4 bg-white rounded-sm shadow-sm shrink-0 dark:bg-gray-700">
<svg class="text-gray-900 w-7 h-7 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z"
clip-rule="evenodd"></path>
</svg>
</div>
<div>
<h3 class="mb-1 text-xl font-bold text-gray-900 dark:text-white">Comprehensive coverage of key topics</h3>
<p class="text-gray-500 dark:text-gray-400">A good UI/UX book should provide comprehensive
coverage of key topics such as user research, interaction design,
information architecture, visual design, usability testing, and more.</p>
</div>
</div>
<div class="flex">
<div
class="flex items-center justify-center w-12 h-12 mr-4 bg-white rounded-sm shadow-sm shrink-0 dark:bg-gray-700">
<svg class="text-gray-900 w-7 h-7 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z"
clip-rule="evenodd"></path>
</svg>
</div>
<div>
<h3 class="mb-1 text-xl font-bold text-gray-900 dark:text-white">Real-world examples and case studies</h3>
<p class="text-gray-500 dark:text-gray-400">To help readers understand how to apply UI/UX
principles in practice, a good book should provide real-world examples and
case studies.</p>
</div>
</div>
<div class="flex">
<div
class="flex items-center justify-center w-12 h-12 mr-4 bg-white rounded-sm shadow-sm shrink-0 dark:bg-gray-700">
<svg class="text-gray-900 w-7 h-7 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm3 14a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"></path>
</svg>
</div>
<div>
<h3 class="mb-1 text-xl font-bold text-gray-900 dark:text-white">Practical advice and tips</h3>
<p class="text-gray-500 dark:text-gray-400">I provide practical advice and tips that readers can
apply in their own projects and step-by-step guidance on how to
conduct user research, design prototypes, conduct usability testing, and more.</p>
</div>
</div>
<div class="flex">
<div
class="flex items-center justify-center w-12 h-12 mr-4 bg-white rounded-sm shadow-sm shrink-0 dark:bg-gray-700">
<svg class="text-gray-900 w-7 h-7 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z">
</path>
</svg>
</div>
<div>
<h3 class="mb-1 text-xl font-bold text-gray-900 dark:text-white">Interactive elements and online resources
</h3>
<p class="text-gray-500 dark:text-gray-400">To make the learning experience more engaging and
effective, we include interactive elements such as quizzes, exercises,
and online resources.</p>
</div>
</div>
</div>
</div>
<!-- Pricing Card -->
<div class="flex flex-col p-6 bg-white rounded-lg shadow-sm xl:p-8 dark:bg-gray-800">
<div class="items-center justify-between md:flex">
<div>
<div class="flex justify-between mb-2">
<h3 class="text-2xl font-bold text-gray-900 dark:text-white">Hard copy + Digital Book</h3>
<div class="flex items-center md:hidden">
<div class="mr-1 text-xl font-extrabold text-gray-900 lg:text-5xl dark:text-white">$599</div>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
</div>
<p class="text-lg text-gray-500 dark:text-gray-400 md:mr-2">Get our book today and start your
learning!</p>
</div>
<div class="hidden md:block">
<div class="text-2xl font-extrabold text-gray-900 lg:text-5xl dark:text-white">$599</div>
<span class="text-gray-500 dark:text-gray-400">per month</span>
</div>
</div>
<a href="#"
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center my-5 lg:my-8 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-900">Buy
now for $99</a>
<div class="justify-between space-y-4 sm:space-y-0 sm:flex">
<!-- List -->
<ul role="list" class="space-y-4">
<li class="flex space-x-2.5">
<!-- Icon -->
<svg class="shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400">A/B Testing</span>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg class="shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400">24/7 Email & Chat Support</span>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg class="shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400">Custom Branding</span>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg class="shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400">Creative Assistant</span>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg class="shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400">Website Builder</span>
</li>
</ul>
<!-- List -->
<ul role="list" class="space-y-4">
<li class="flex space-x-2.5">
<!-- Icon -->
<svg class="shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400">Advanced Segmentation</span>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg class="shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400">Multivariate Testing</span>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg class="shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400">Comparative Reporting</span>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg class="shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400">Custom Templates</span>
</li>
<li class="flex space-x-2.5">
<!-- Icon -->
<svg class="shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<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"></path>
</svg>
<span class="leading-tight text-gray-500 dark:text-gray-400">Dynamic Content</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
<h2
class="mb-6 text-3xl font-extrabold tracking-tight text-center text-gray-900 lg:mb-8 sm:text-4xl dark:text-white">
Frequently asked questions</h2>
<div class="max-w-screen-md mx-auto">
<div id="accordion-flush" data-accordion="collapse"
data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
data-inactive-classes="text-gray-500 dark:text-gray-400">
<h2 id="accordion-flush-heading-1">
<button type="button"
class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-900 bg-white border-b border-gray-200 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
data-accordion-target="#accordion-flush-body-1" aria-expanded="true" aria-controls="accordion-flush-body-1">
<span>Can I use Flowbite in open-source projects?</span>
<svg data-accordion-icon="" class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</h2>
<div id="accordion-flush-body-1" class="" aria-labelledby="accordion-flush-heading-1">
<div class="py-5 border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is an open-source library of interactive
components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="#"
class="text-primary-700 dark:text-primary-500 hover:underline">get started</a> and start developing
websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-flush-heading-2">
<button type="button"
class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
data-accordion-target="#accordion-flush-body-2" aria-expanded="false"
aria-controls="accordion-flush-body-2">
<span>Is there a Figma file available?</span>
<svg data-accordion-icon="" class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</h2>
<div id="accordion-flush-body-2" class="hidden" aria-labelledby="accordion-flush-heading-2">
<div class="py-5 border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">Flowbite is first conceptualized and designed using the
Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-gray-500 dark:text-gray-400">Check out the <a href="#"
class="text-primary-700 dark:text-primary-500 hover:underline">Figma design system</a> based on the
utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</div>
<h2 id="accordion-flush-heading-3">
<button type="button"
class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
data-accordion-target="#accordion-flush-body-3" aria-expanded="false"
aria-controls="accordion-flush-body-3">
<span>What are the differences between Flowbite and Tailwind UI?</span>
<svg data-accordion-icon="" class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</h2>
<div id="accordion-flush-body-3" class="hidden" aria-labelledby="accordion-flush-heading-3">
<div class="py-5 border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from
Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference
is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of
pages.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Flowbite,
Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two
worlds.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
<li><a href="#" class="text-primary-700 dark:text-primary-500 hover:underline">Flowbite Pro</a></li>
<li><a href="#" class="text-primary-700 dark:text-primary-500 hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
<h2 id="accordion-flush-heading-4">
<button type="button"
class="flex items-center justify-between w-full py-5 font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
data-accordion-target="#accordion-flush-body-4" aria-expanded="false"
aria-controls="accordion-flush-body-4">
<span>What about browser support?</span>
<svg data-accordion-icon="" class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
</h2>
<div id="accordion-flush-body-4" class="hidden" aria-labelledby="accordion-flush-heading-4">
<div class="py-5 border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">The main difference is that the core components from
Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference
is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of
pages.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">However, we actually recommend using both Flowbite,
Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two
worlds.</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
<ul class="pl-5 text-gray-500 list-disc dark:text-gray-400">
<li><a href="#" class="text-primary-700 dark:text-primary-500 hover:underline">Flowbite Pro</a></li>
<li><a href="#" class="text-primary-700 dark:text-primary-500 hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="border-t border-b border-gray-100 bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
<div class="max-w-screen-md mx-auto text-center">
<h2 class="mb-6 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl dark:text-white">Get free sample
chapters
</h2>
<form action="#" class="max-w-md mx-auto">
<div class="flex items-center mb-3">
<div class="relative w-full mr-3">
<label for="member_email" class="hidden mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Email
address</label>
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
</svg>
</div>
<input
class="block w-full p-3 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-white focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Enter your email" type="email" name="member[email]" id="member_email" required="">
</div>
<div>
<input type="submit" value="Subscribe"
class="px-5 py-3 text-sm font-medium text-center text-white rounded-lg cursor-pointer bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
name="member_submit" id="member_submit">
</div>
</div>
<div class="text-sm text-left text-gray-500 dark:text-gray-300">Instant signup. No credit card
required.
</div>
</form>
</div>
</div>
</section>
<footer class=" bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
<div class="grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-5">
<div>
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Company</h2>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">About</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Careers</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Brand Center</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Blog</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Help center</h2>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Discord Server</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Twitter</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Facebook</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Contact Us</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Legal</h2>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Privacy Policy</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Licensing</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Terms</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Company</h2>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">About</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Careers</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Brand Center</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Blog</a>
</li>
</ul>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Download</h2>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">iOS</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Android</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Windows</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">MacOS</a>
</li>
</ul>
</div>
</div>
<div class="mt-8 text-center lg:mt-16 sm:mt-12">
<a href="#" class="flex items-center justify-center mb-5 text-2xl font-semibold text-gray-900 dark:text-white">
<svg class="h-8 mr-2" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.2696 13.126C25.1955 13.6364 24.8589 14.3299 24.4728 14.9328C23.9856 15.6936 23.2125 16.2264 22.3276 16.4114L18.43 17.2265C17.8035 17.3575 17.2355 17.6853 16.8089 18.1621L14.2533 21.0188C13.773 21.5556 13.4373 21.4276 13.4373 20.7075C13.4315 20.7342 12.1689 23.9903 15.5149 25.9202C16.8005 26.6618 18.6511 26.3953 19.9367 25.6538L26.7486 21.7247C29.2961 20.2553 31.0948 17.7695 31.6926 14.892C31.7163 14.7781 31.7345 14.6639 31.7542 14.5498L25.2696 13.126Z"
fill="url(#paint0_linear_11430_22515)" />
<path
d="M23.5028 9.20133C24.7884 9.94288 25.3137 11.0469 25.3137 12.53C25.3137 12.7313 25.2979 12.9302 25.2694 13.1261L28.0141 14.3051L31.754 14.5499C32.2329 11.7784 31.2944 8.92561 29.612 6.65804C28.3459 4.9516 26.7167 3.47073 24.7581 2.34097C23.167 1.42325 21.5136 0.818599 19.8525 0.486816L17.9861 2.90382L17.3965 5.67918L23.5028 9.20133Z"
fill="url(#paint1_linear_11430_22515)" />
<path
d="M1.5336 11.2352C1.5329 11.2373 1.53483 11.238 1.53556 11.2358C1.67958 10.8038 1.86018 10.3219 2.08564 9.80704C3.26334 7.11765 5.53286 5.32397 8.32492 4.40943C11.117 3.49491 14.1655 3.81547 16.7101 5.28323L17.3965 5.67913L19.8525 0.486761C12.041 -1.07341 4.05728 3.51588 1.54353 11.2051C1.54233 11.2087 1.53796 11.2216 1.5336 11.2352Z"
fill="url(#paint2_linear_11430_22515)" />
<path
d="M19.6699 25.6538C18.3843 26.3953 16.8003 26.3953 15.5147 25.6538C15.3402 25.5531 15.1757 25.4399 15.0201 25.3174L12.7591 26.8719L10.8103 30.0209C12.9733 31.821 15.7821 32.3997 18.589 32.0779C20.7013 31.8357 22.7995 31.1665 24.7582 30.0368C26.3492 29.1191 27.7 27.9909 28.8182 26.7195L27.6563 23.8962L25.7762 22.1316L19.6699 25.6538Z"
fill="url(#paint3_linear_11430_22515)" />
<path
d="M15.0201 25.3175C14.0296 24.5373 13.4371 23.3406 13.4371 22.0588V21.931V11.2558C13.4371 10.6521 13.615 10.5494 14.1384 10.8513C13.3323 10.3864 11.4703 8.79036 9.17118 10.1165C7.88557 10.858 6.8269 12.4949 6.8269 13.978V21.8362C6.8269 24.775 8.34906 27.8406 10.5445 29.7966C10.6313 29.874 10.7212 29.9469 10.8103 30.0211L15.0201 25.3175Z"
fill="url(#paint4_linear_11430_22515)" />
<path
d="M28.6604 5.49565C28.6589 5.49395 28.6573 5.49532 28.6589 5.49703C28.9613 5.83763 29.2888 6.23485 29.6223 6.68734C31.3648 9.05099 32.0158 12.0447 31.4126 14.9176C30.8093 17.7906 29.0071 20.2679 26.4625 21.7357L25.7761 22.1316L28.8181 26.7195C34.0764 20.741 34.09 11.5388 28.6815 5.51929C28.6789 5.51641 28.67 5.50622 28.6604 5.49565Z"
fill="url(#paint5_linear_11430_22515)" />
<path
d="M7.09355 13.978C7.09354 12.4949 7.88551 11.1244 9.17113 10.3829C9.34564 10.2822 9.52601 10.1965 9.71002 10.1231L9.49304 7.38962L7.96861 4.26221C5.32671 5.23364 3.1897 7.24125 2.06528 9.83067C1.2191 11.7793 0.75001 13.9294 0.75 16.1888C0.75 18.0243 1.05255 19.7571 1.59553 21.3603L4.62391 21.7666L7.09355 21.0223V13.978Z"
fill="url(#paint6_linear_11430_22515)" />
<path
d="M9.71016 10.1231C10.8817 9.65623 12.2153 9.74199 13.3264 10.3829L13.4372 10.4468L22.3326 15.5777C22.9566 15.9376 22.8999 16.2918 22.1946 16.4392L22.7078 16.332C23.383 16.1908 23.9999 15.8457 24.4717 15.3428C25.2828 14.4782 25.5806 13.4351 25.5806 12.5299C25.5806 11.0468 24.7886 9.67634 23.503 8.93479L16.6911 5.00568C14.1436 3.53627 11.0895 3.22294 8.29622 4.14442C8.18572 4.18087 8.07756 4.2222 7.96875 4.26221L9.71016 10.1231Z"
fill="url(#paint7_linear_11430_22515)" />
<path
d="M20.0721 31.8357C20.0744 31.8352 20.0739 31.8332 20.0717 31.8337C19.6252 31.925 19.1172 32.0097 18.5581 32.0721C15.638 32.3978 12.7174 31.4643 10.5286 29.5059C8.33986 27.5474 7.09347 24.7495 7.09348 21.814L7.09347 21.0222L1.59546 21.3602C4.1488 28.8989 12.1189 33.5118 20.0411 31.8421C20.0449 31.8413 20.0582 31.8387 20.0721 31.8357Z"
fill="url(#paint8_linear_11430_22515)" />
<defs>
<linearGradient id="paint0_linear_11430_22515" x1="20.8102" y1="23.9532" x2="23.9577" y2="12.9901"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient id="paint1_linear_11430_22515" x1="28.0593" y1="10.5837" x2="19.7797" y2="2.33321"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient id="paint2_linear_11430_22515" x1="16.9145" y1="5.2045" x2="4.42432" y2="5.99375"
gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
<linearGradient id="paint3_linear_11430_22515" x1="16.0698" y1="28.846" x2="27.2866" y2="25.8192"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient id="paint4_linear_11430_22515" x1="8.01881" y1="15.8661" x2="15.9825" y2="24.1181"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient id="paint5_linear_11430_22515" x1="26.2004" y1="21.8189" x2="31.7569" y2="10.6178"
gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
<linearGradient id="paint6_linear_11430_22515" x1="6.11387" y1="9.31427" x2="3.14054" y2="20.4898"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient id="paint7_linear_11430_22515" x1="21.2932" y1="8.78271" x2="10.4278" y2="11.488"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient id="paint8_linear_11430_22515" x1="7.15667" y1="21.5399" x2="14.0824" y2="31.9579"
gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
</defs>
</svg>
Flowbite
</a>
<span class="block text-sm text-center text-gray-500 dark:text-gray-400">© 2021-<span id="currentYear">2022</span> <a href="#"
class="hover:underline">Flowbite™</a>. All Rights Reserved.
</span>
<ul class="flex justify-center mt-5 space-x-5">
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</div>
</div>
</footer>
Reference in New Issue View Git Blame Copy Permalink