Flowbite를 사용하여 Tailwind CSS에서 영웅 섹션을 작성하는 방법

Hero 구성 요소는 "접힌 부분 위에"표시되는 첫 번째 섹션이고 웹 사이트 방문자가 페이지를 떠나지 않도록 변경할 수 있기 때문에 웹 사이트에서 가장 중요한 부분 중 하나입니다.

일반적으로 최소한 CTA 버튼, 제목, 설명 및 시각적 요소를 포함합니다.

오늘은 Tailwind CSS 및 Flowbite를 사용하여 제목, 설명, 버튼 및 시각적 요소가 포함된 간단한 영웅 구성 요소를 구축하는 방법을 보여 드리겠습니다.

Tailwind CSS은 HTML을 종료할 필요 없이 웹 사이트 개발 속도를 높이는 데 도움이 되는 가장 널리 사용되는 유틸리티 우선 CSS 프레임워크입니다.



Flowbite은 탐색 모음, 모달, 드롭다운 등을 특징으로 하는 Tailwind CSS 프레임워크 위에 구축된 가장 인기 있는 오픈 소스 구성 요소 라이브러리입니다.



다음은 우리가 구축할 영웅 섹션의 미리보기입니다.



시작하자!

Tailwind CSS로 영웅 구성 요소 빌드

먼저 <section> 요소를 사용하고 전체 페이지에 대해 하나 이상의 <h1> 태그를 사용해야 합니다.

<section>
    <h1>Payments tool for software companies</h1>
</section>

대박! 이제 두 개의 행을 만들고 설명이 있는 <divs> 태그와 두 개의 <p> CTA 버튼을 추가할 수 있도록 몇 가지 <a> 태그를 마무리하겠습니다.

<section>
    <div>
        <div>
            <h1>Payments tool for software companies</h1>
            <p>From checkout to global sales tax compliance, companies around the world use Flowbite to simplify their payment stack.</p>
            <a href="#">
                Get started
            </a>
            <a href="#">
                Speak to Sales
            </a> 
        </div>              
    </div>
</section>

엄청난! 이제 이미지도 추가해 보겠습니다.

<section>
    <div>
        <div>
            <h1>Payments tool for software companies</h1>
            <p>From checkout to global sales tax compliance, companies around the world use Flowbite to simplify their payment stack.</p>
            <a href="#">
                Get started
            </a>
            <a href="#">
                Speak to Sales
            </a> 
        </div>
    <div>
            <img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/phone-mockup.png" alt="mockup">
        </div>
    </div>
</section>

이제 우리는 의미론적으로 올바른 데 필요한 모든 태그를 가지고 있으므로 여전히 스타일을 지정해야 합니다.

Flowbite Blocks 컬렉션에서 두 번째Tailwind CSS Hero 섹션의 스타일을 사용하고 여기에서 유틸리티 클래스를 적용해 보겠습니다.

<section class="bg-white dark:bg-gray-900">
    <div class="grid max-w-screen-xl px-4 py-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12">
        <div class="mr-auto place-self-center lg:col-span-7">
            <h1 class="max-w-2xl mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white">Payments tool for software companies</h1>
            <p class="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">From checkout to global sales tax compliance, companies around the world use Flowbite to simplify their payment stack.</p>
            <a href="#" class="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-900">
                Get started
                <svg class="w-5 h-5 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="#" class="inline-flex items-center justify-center px-5 py-3 text-base font-medium text-center text-gray-900 border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800">
                Speak to Sales
            </a> 
        </div>
        <div class="hidden lg:mt-0 lg:col-span-5 lg:flex">
            <img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/phone-mockup.png" alt="mockup">
        </div>                
    </div>
</section>

대박! 이것은 영웅 섹션이 미리 보기에서처럼 보이도록 하는 데 필요한 최종 코드입니다.

dark mode with Tailwind CSS을 활성화하면 영웅 섹션이 다음과 같이 표시됩니다.



Tailwind CSS 및 Flowbite로 웹사이트를 구축하는 데 이 튜토리얼이 도움이 되었기를 바랍니다.

이 영웅 섹션은 Flowbite 블록 컬렉션의 Tailwind CSS로 코딩되고 Flowbite 라이브러리를 기반으로 하는 다른 영웅 섹션의 예입니다.

🔗 유용한 링크 및 크레딧:

Tailwind CSS Hero

Flowbite Library - Tailwind CSS Components

Tailwind CSS