순풍 카드

Tailwind로 제작된 반응형 카드. 카드는 머리글, 바닥글, 이미지 및 다양한 콘텐츠에 대한 확장 가능한 옵션이 있는 유연한 콘텐츠 컨테이너입니다.

설치

빠른 시작

Tailwind 사용을 시작하려면 스타터를 다운로드하기만 하면 됩니다.

DOWNLOAD ZIP STARTER

Tailwind Elements는 TailwindCSS에서 이미 CSS를 변경하거나 추가하지 않습니다.

구성 요소를 Tailwind 디자인에 직접 복사하면 바로 작동합니다.

일부 동적 구성 요소(드롭다운 또는 모달과 같은)에서는 Font Awesome 아이콘과 사용자 지정 JavaScript를 추가합니다. 그러나 추가 설치가 필요하지 않으며 필요한 모든 코드가 항상 예제에 포함되어 있으며 모든 Tailwind 프로젝트에 복사됩니다. 작동합니다.

MDB GO

커스터마이징

간단한 카드


HTML

<!-- Card -->
    <div class="shadow-md rounded-md" style="width: 350px;">

      <div class="p-5">
          <h5 class="text-xl font-semibold mb-2">Card title</h5>

          <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure sequi tenetur, voluptatibus
              harum
              consequuntur
              alias quaerat excepturi temporibus nisi commodi, ex, ratione quae soluta! Saepe alias dolores dolorem
              assumenda totam?</p>

          <button
              class="bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
              type="button">
              Button
          </button>

      </div>

  </div>
  <!-- Card -->

이미지가 있는 카드


HTML

<!-- Card -->
    <div class="shadow-md rounded-md overflow-hidden" style="width: 350px;">

      <img src="https://mdbootstrap.com/img/new/standard/city/031.jpg" class="" alt="">

      <div class="p-4">
          <h5 class="text-xl font-semibold mb-2">Card title</h5>

          <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure sequi tenetur, voluptatibus
              harum
              consequuntur
              alias quaerat excepturi temporibus nisi commodi, ex, ratione quae soluta! Saepe alias dolores dolorem
              assumenda totam?</p>

          <button
              class="bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
              type="button">
              Button
          </button>
      </div>
  </div>
  <!-- Card -->

📄 카드 설명서 페이지에서 더 많은 사용자 지정 예제를 볼 수 있습니다.

중요한 자원

다음은 이 구성 요소로 작업하는 데 도움이 되도록 준비한 리소스입니다.

읽기📄 Cards documentation page <-- 여기에서 시작

프로젝트를 최대한 활용하려면 카드와 관련된 다른 구성 요소 옵션도 숙지해야 합니다. 목록을 찾으려면 아래 섹션을 참조하십시오.

프로젝트를 완료한 후 CLI로 게시하여 💽 Free hosting (beta)을 받을 수 있습니다.

관련 구성 요소 옵션 및 기능

Accordion

Alerts

Badges

Button group

Buttons

Carousel

Charts

Chips

Dropdown

Gallery

Headings

Images

List group

Modal

Paragraphs

Popover

Progress

Rating

Spinners

Stepper

Tables

Template

Toast

Tooltip

추가 리소스

학습 로드맵을 통해 웹 개발에 대해 알아보세요.
🎓 Start Learning

메일링 리스트에 가입하고 개발자를 위한 독점 리소스를 받으세요.
🎁 Get gifts

영감과 커뮤니티 경험을 위해 비공개 FB 그룹에 가입하세요.
👨‍👩‍👧‍👦 Ask to join

GitHub의 STAR를 사용하여 오픈 소스 패키지 생성 지원