Создание простой страницы лендинга за 5 минут используя готовые CSS блоки tailwind.

Spread the love

Небольшая заметка об интересном проекте TailBlocks

Оригинальная статья — Gilbish — Create a simple landing page in 5 minutes using Ready-To-Use tailwind CSS blocks.

Введение

TailBlocks — это проект, который предоставляет несколько шаблонов, созданных с использованием Tailwind CSS.
Он предоставляет HTML-код, который сразу можно использовать в своих проектах.

Строим простой сайт используя TailBlocks:

Линк: demo

Давайте начнем

Шаг 1) Создадим новый HTML файл

     <html/>
         <head>
           <title>TailWind CSS block</title>
         </head>
         <body>
         </body>
     </html>

Шаг 2) Добавим CDN для TailWind CSS.

TailBlock использует TailWindCSS для css

     <html/>
         <head>
           <title>TailWind CSS block</title>
           <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
         </head>
         <body>
         </body>
     </html>

Шаг 3) Выберем компоненты TailBlocks

Посетите TailBlocks, там вы можете увидеть список всех компонентов в левой боковой панели

Найдите компоненты заголовка (Header components) на левой боковой панели и выберите один компонент, затем скопируйте его код в созданный нами HTML-файл.

Вы можете скопировать его код, сначала щелкнув ViewCode, а затем скопировать в буфер обмена, представленный в Header на сайте TailBlocks.

Это код, который я скопировал из компонента заголовка

     <html/>
         <head>
           <title>TailWind CSS block</title>
           <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
         </head>
         <body>
              <header class="text-gray-700 body-font">
                <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
                  <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
                   </svg>
                  <span class="ml-3 text-xl">tailblocks</span>
              </a>
              <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
              <a class="mr-5 hover:text-gray-900">First Link</a>
              <a class="mr-5 hover:text-gray-900">Second Link</a>
              <a class="mr-5 hover:text-gray-900">Third Link</a>
              <a class="mr-5 hover:text-gray-900">Fourth Link</a>
            </nav>
           <button class="inline-flex items-center bg-gray-200 border-0 py-1 px-3 focus:outline-none hover:bg-gray-300 rounded text-base mt-4 md:mt-0">Button
           <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
         <path d="M5 12h14M12 5l7 7-7 7"></path>
      </svg>
    </button>
  </div>
</header>
         </body>
     </html>

Результат:

TailBlock также предоставляет опции для изменения цвета компонентов.

Шаг 4) Попробуйте разные компоненты и поэкспериментируйте с разными шаблонами

Мои мысли о TailBlocks:
Этот проект очень полезен для быстрого создания сайтов однако поддержка и настройка кода всегда будут требовать каких то усилий.
Но, мне он очень понравился, для быстрого создания простых страничек 😄 Возможно вам понравиться тоже.

Была ли вам полезна эта статья?

[10 / 2.9]

Spread the love

Editorial Team

Next Event Bubbling и Event Capturing в Javascript »

Previous « Что такое функция высшего порядка?

Vue 3.4 Новая механика v-model компонента

Краткий перевод: https://vuejs.org/guide/components/v-model.html Основное использование v-model используется для реализации двусторонней привязки в компоненте. Начиная с Vue…

12 месяцев ago