Tailwind CSS를 사용하여 브라우저 모형을 만들어 봅시다.

좋습니다. 이 경우에 필요한 것이 무엇인지 생각해야 합니까? 내가 아는 것처럼 헤더와 본문이 필요하고 헤더 내부에는 빨간색, 노란색 및 녹색의 세 점이 필요합니다.

헤더용 컨테이너를 생성해 보겠습니다.

<div class="w-full h-11 rounded-t-lg border-2 border-black flex justify-start items-center space-x-1.5 px-3">
    <!-- The dots will be here -->
</div>

다음으로 헤더 내부에 점을 만들어야 합니다.

<span class="w-3 h-3 rounded-full bg-black"></span>

그리고 헤더가 flex justify-start 로 설정되었기 때문에 이제 다음과 같이 헤더 내부에 3개의 스팬을 넣을 수 있습니다.

<div class="w-full h-11 rounded-t-lg border-2 border-black flex justify-start items-center space-x-1.5 px-3">
    <span class="w-3 h-3 rounded-full bg-black"></span>
    <span class="w-3 h-3 rounded-full bg-black"></span>
    <span class="w-3 h-3 rounded-full bg-black"></span>
</div>

이게 우리가 원하는 것이 아니라고 생각할 수도 있으니 점 배경을 하나씩 바꿔주세요.

<div class="w-full h-11 rounded-t-lg border-2 border-black flex justify-start items-center space-x-1.5 px-3">
    <span class="w-3 h-3 rounded-full bg-red-400"></span>
    <span class="w-3 h-3 rounded-full bg-yellow-400"></span>
    <span class="w-3 h-3 rounded-full bg-green-400"></span>
</div>

다음으로, 우리의 muckup에 대한 몸체를 만들어 보겠습니다. 물론 원하는 대로 높이를 변경할 수 있습니다. 이 예에서는 자체 tailwind에서 최대 간격( 24rem )의 기본 클래스를 사용합니다.

<div class="border-2 border-black border-t-0 w-full h-96"></div>

이제 다음과 같이 하나의 컨테이너에 병합할 수 있습니다.

<div  class="max-w-3xl mx-auto my-10">
    <div  class="w-full h-11 rounded-t-lg bg-gray-200 flex justify-start items-center space-x-1.5 px-3">
        <span  class="w-3 h-3 rounded-full bg-red-400"></span>
        <span  class="w-3 h-3 rounded-full bg-yellow-400"></span>
        <span  class="w-3 h-3 rounded-full bg-green-400"></span>
    </div>
    <div  class="bg-gray-100 border-t-0 w-full h-96"></div>
</div>

이제 회색 모형 브라우저가 있습니다. 그러나 나머지는 다크 모드와 점의 윤곽처럼 만들어 봅시다.

<div class="max-w-3xl mx-auto my-10">
    <div class="w-full h-11 rounded-t-lg bg-gray-900 flex justify-start items-center space-x-1.5 px-3">
        <span class="w-3 h-3 rounded-full bg-red-400"></span>
        <span class="w-3 h-3 rounded-full bg-yellow-400"></span>
        <span class="w-3 h-3 rounded-full bg-green-400"></span>
    </div>
    <div class="bg-gray-700 border-t-0 w-full h-96"></div>
</div>

마지막은 점의 윤곽입니다.

<div class="max-w-3xl mx-auto my-10">
    <div class="w-full h-11 relative rounded-t-lg bg-blue-900 flex overflow-hidden justify-start items-center space-x-1.5 px-2">
        <div class="absolute w-full h-full inset-0 bg-black opacity-50"></div>
        <span class="relative w-3 h-3 border-2 rounded-full border-red-400"></span>
        <span class="relative w-3 h-3 border-2 rounded-full border-yellow-400"></span>
        <span class="relative w-3 h-3 border-2 rounded-full border-green-400"></span>
    </div>
    <div class="relative bg-blue-600 border-t-0 w-full h-96 border-t border-blue-900">
        <div class="absolute w-full h-full inset-0 bg-black opacity-60"></div>
    </div>
</div>

그리고 우리는 끝났습니다.