Published on

Ultimate Guide: Create A SNCF Connect With Tailwind CSS

Tags
Pages
SNCF Connect

Are you looking to create a sleek and professional UI component for your website or application? Look no further than SNCF Connect, a UI component that is both visually appealing and highly functional. In this ultimate guide, we will walk you through how to create a SNCF Connect UI component using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to quickly and easily create custom designs without the need for writing custom CSS. It provides a set of pre-defined classes that can be used to style HTML elements, making it easy to create responsive and visually appealing designs.

The description of SNCF Connect UI component

SNCF Connect is a UI component that is commonly used in transportation and travel websites. It allows users to search for and book train tickets, view train schedules, and access other travel-related information. The component typically includes a search bar, a list of available train options, and a booking form.

Why use Tailwind CSS to create a SNCF Connect UI component?

Tailwind CSS is an excellent choice for creating a SNCF Connect UI component for several reasons. Firstly, it provides a set of pre-defined classes that can be used to style the component quickly and easily. Secondly, it is highly customizable, allowing developers to create a unique design that fits their specific needs. Finally, it is lightweight and fast, ensuring that the component loads quickly and efficiently.

The preview of SNCF Connect UI component

To create a SNCF Connect UI component with Tailwind CSS, we will start by creating a basic HTML structure and then adding the necessary classes to style the component. The final result will be a sleek and professional-looking component that is both visually appealing and highly functional.

Free download of the SNCF Connect's source code

The source code of SNCF Connect UI component

To create a SNCF Connect UI component with Tailwind CSS, we will use a combination of HTML and CSS. The HTML will provide the basic structure of the component, while the CSS will be used to style it. We will start by creating a basic HTML structure and then adding the necessary CSS to style the component.

<div class="min-h-screen bg-slate-100 flex flex-col relative overflow-hidden">
  <div class="bg-slate-900 w-100 p-4">
    <div class="w-28">
      <svg viewBox="0 0 130 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-1vd36c1">
        <path d="M33.593 11.955H10.276C4.594 11.955 0 16.575 0 22.255a10.268 10.268 0 0 0 10.276 10.276h23.317A10.268 10.268 0 0 0 43.87 22.256c0-5.682-4.595-10.3-10.276-10.3ZM4.57 42.288c-.89 0-1.804.321-1.804 1.21 0 .865.865 1.063 2.421 1.433 1.655.395 3.607 1.136 3.607 3.36 0 2.717-2.224 3.73-4.669 3.73-1.235 0-2.643-.347-3.507-1.014-.494-.37-.618-.79-.618-1.111 0-.642.494-1.186 1.16-1.186.297 0 .594.1.964.37.643.52 1.359.791 2.15.791.814 0 1.827-.32 1.827-1.334 0-.938-.89-1.185-2.593-1.58-1.655-.396-3.31-1.063-3.31-3.187 0-2.495 2.223-3.557 4.446-3.557 1.111 0 2.297.272 3.087.865.544.395.667.765.667 1.087 0 .617-.444 1.136-1.136 1.136-.247 0-.519-.099-.815-.321-.593-.494-1.21-.692-1.877-.692Zm6.644-.519c0-1.26.914-1.457 1.334-1.457.42 0 1.334.198 1.334 1.457v.544h.05c.493-1.112 1.827-2.125 3.457-2.125 2.915 0 4.126 2.224 4.126 4.52v5.633c0 1.333-.94 1.556-1.409 1.556-.469 0-1.407-.223-1.407-1.556v-4.842c0-1.334-.297-2.989-2.1-2.989-1.779 0-2.618 1.532-2.618 3.039v4.792c0 1.333-.939 1.556-1.408 1.556-.47 0-1.408-.223-1.408-1.556v-8.572h.05Zm21.44 7.09c.717 0 1.137.543 1.137 1.111 0 .395-.124.79-.741 1.235-.79.568-2.026.815-2.989.815-3.335 0-5.953-2.198-5.953-5.903 0-3.631 2.692-5.904 5.978-5.904 1.062 0 2.149.247 2.94.79.641.445.79.89.79 1.211 0 .617-.47 1.21-1.21 1.21-.248 0-.52-.074-.94-.37a2.678 2.678 0 0 0-1.58-.519c-2.05 0-3.063 1.828-3.063 3.582 0 1.754.988 3.557 3.063 3.557.617 0 1.16-.149 1.655-.47.37-.247.667-.346.914-.346Zm4.1-6.102c-1.061 0-1.259-.74-1.259-1.111 0-.37.198-1.112 1.26-1.112h1.062V38.88c0-2.667 1.038-5.063 4.273-5.063 1.161 0 1.779.395 1.779 1.235 0 .617-.42 1.136-1.31 1.136-1.506 0-1.95.963-1.95 2.52v1.827h1.53c1.063 0 1.26.741 1.26 1.112 0 .37-.197 1.111-1.26 1.111h-1.53v7.584c0 1.333-.94 1.556-1.409 1.556-.444 0-1.408-.223-1.408-1.556v-7.584h-1.037Z" fill="#8DE8FE"></path>
        <path d="M56.121 11.955a10.268 10.268 0 0 0-10.275 10.276A10.268 10.268 0 0 0 56.12 32.507 10.268 10.268 0 0 0 66.397 22.23 10.268 10.268 0 0 0 56.12 11.955ZM54.392 48.858c.716 0 1.136.544 1.136 1.112 0 .395-.124.79-.741 1.235-.79.568-2.026.815-2.99.815-3.334 0-5.977-2.198-5.977-5.928 0-3.631 2.717-5.928 6.003-5.928 1.062 0 2.149.246 2.939.79.642.445.79.89.79 1.21 0 .618-.469 1.21-1.21 1.21-.247 0-.519-.073-.938-.37a2.678 2.678 0 0 0-1.581-.519c-2.05 0-3.088 1.853-3.088 3.582 0 1.754.988 3.557 3.088 3.557.617 0 1.16-.148 1.655-.47.37-.172.666-.296.913-.296Zm8.768 3.187c-3.384 0-6.076-2.446-6.076-5.978 0-3.532 2.717-5.879 6.076-5.879 3.384 0 6.077 2.347 6.077 5.879 0 3.508-2.693 5.978-6.077 5.978Zm0-9.584c-2.223 0-3.235 1.852-3.235 3.581 0 1.754 1.037 3.631 3.235 3.631 2.223 0 3.236-1.877 3.236-3.63 0-1.73-1.037-3.582-3.236-3.582Zm8.473-.692c0-1.26.914-1.482 1.334-1.482.42 0 1.333.198 1.333 1.482v.544h.05c.494-1.112 1.828-2.125 3.483-2.125 2.914 0 4.125 2.248 4.125 4.52v5.657c0 1.334-.939 1.556-1.408 1.556-.47 0-1.408-.222-1.408-1.556v-4.841c0-1.334-.297-2.99-2.1-2.99-1.778 0-2.618 1.532-2.618 3.039v4.817c0 1.334-.939 1.556-1.408 1.556-.47 0-1.408-.222-1.408-1.556v-8.62h.025Zm13.091 0c0-1.26.914-1.482 1.334-1.482.42 0 1.334.198 1.334 1.482v.544h.05c.493-1.112 1.827-2.125 3.482-2.125 2.915 0 4.125 2.248 4.125 4.52v5.657c0 1.334-.939 1.556-1.408 1.556-.47 0-1.408-.222-1.408-1.556v-4.841c0-1.334-.296-2.99-2.1-2.99-1.778 0-2.618 1.532-2.618 3.039v4.817c0 1.334-.938 1.556-1.407 1.556-.47 0-1.409-.222-1.409-1.556v-8.62h.025Zm15.414 5.237c.123 1.58 1.556 2.742 3.186 2.742 1.161 0 1.877-.371 2.569-.964.395-.321.642-.395.963-.395.618 0 1.112.444 1.112 1.111 0 .223-.099.643-.47 1.013-1.086 1.038-2.346 1.507-4.149 1.507-3.459 0-6.027-2.223-6.027-5.854 0-3.606 2.544-6.002 5.928-6.002 2.717 0 4.891 1.531 5.335 4.816.025.223.05.395.05.593 0 .988-.544 1.408-1.458 1.408h-7.039v.025Zm5.73-2.026c0-1.457-.815-2.717-2.643-2.717-1.655 0-2.989 1.136-3.112 2.717h5.755Zm13.092 3.878c.716 0 1.136.544 1.136 1.112 0 .395-.124.79-.741 1.235-.791.568-2.026.815-2.989.815-3.335 0-5.978-2.198-5.978-5.928 0-3.631 2.718-5.928 6.003-5.928 1.062 0 2.149.246 2.939.79.642.445.791.89.791 1.21 0 .618-.47 1.21-1.211 1.21-.247 0-.518-.073-.938-.37a2.68 2.68 0 0 0-1.581-.519c-2.05 0-3.088 1.853-3.088 3.582 0 1.754.988 3.557 3.088 3.557.617 0 1.161-.148 1.655-.47.37-.172.667-.296.914-.296Zm8.25 3.088c-2.964 0-3.607-1.828-3.607-3.977v-5.237h-.914c-1.062 0-1.259-.74-1.259-1.111 0-.37.197-1.112 1.259-1.112h.914v-1.926c0-1.285.914-1.507 1.384-1.507.469 0 1.383.222 1.383 1.507v1.926h1.754c1.062 0 1.259.741 1.259 1.112 0 .37-.197 1.111-1.259 1.111h-1.754v5.212c0 1.087.37 1.68 1.062 1.68.124 0 .272-.025.445-.05.197-.024.222-.024.321-.024.691 0 1.062.519 1.062 1.037 0 .445-.247.815-.667 1.038a3.085 3.085 0 0 1-1.383.32Z" fill="#fff"></path>
        <path d="M39.868 25.592a7.484 7.484 0 1 0-13.388-6.694 7.484 7.484 0 0 0 13.388 6.694Z" fill="#0C131F"></path>
      </svg>
    </div>
    <h1 class="text-white text-xl font-semibold">Rechercher</h1>
  </div>
  <div class="p-4 flex flex-col gap-1 relative font-semibold">
    <div class="flex">
      <div class="w-20 z-10 pl-3 text-center pointer-events-none flex items-center justify-center">Départ :</div>
      <input type="text" class="w-full -ml-20 pl-20 pr-3 py-3 outline-none rounded-t-xl flex-1 border-0 bg-slate-200 focus:ring-2 focus:ring-slate-600" placeholder="D'où partons nous ?" />
    </div>
    <div class="flex">
      <div class="w-20 z-10 pl-3 text-center pointer-events-none flex items-center justify-center">Arrivée :</div>
      <input type="text" class="w-full -ml-20 pl-20 pr-3 py-3 outline-none rounded-b-xl flex-1 border-0 bg-slate-0 focus:ring-2 focus:ring-slate-600" placeholder="Où allons nous ?" value="Paris Nord" />
    </div>
    <button class="absolute rounded-full w-10 h-10 bg-slate-100 right-10 top-11 flex justify-center items-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <polyline points="3 8 7 4 11 8"></polyline>
        <line x1="7" y1="4" x2="7" y2="13"></line>
        <polyline points="13 16 17 20 21 16"></polyline>
        <line x1="17" y1="10" x2="17" y2="20"></line>
      </svg>
    </button>
  </div>
  <div class="bg-white rounded-xl mx-4 flex flex-col">
    <h4 class="text-xs p-4">Villes, Gares et Stations</h4>
    <div class="bg-slate-200 flex py-2">
      <div class="p-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-smart-home" width="24" height="24" viewBox="0 0 24 24" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <path d="M19 8.71l-5.333 -4.148a2.666 2.666 0 0 0 -3.274 0l-5.334 4.148a2.665 2.665 0 0 0 -1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-7.2c0 -.823 -.38 -1.6 -1.03 -2.105"></path>
        </svg>
      </div>
      <div>
        <div class="text-xs">Gare</div>
        <div class="font-semibold">Gare du Nord (Paris)<span class="font-normal ml-1">(Île de France)</span></div>
        <div class="font-bold flex gap-2">
          <div class="text-sm h-5 w-5 rounded-md flex justify-center items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-train" width="24" height="24" viewBox="0 0 24 24" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M21 13c0 -3.87 -3.37 -7 -10 -7h-8"></path>
              <path d="M3 15h16a2 2 0 0 0 2 -2"></path>
              <path d="M3 6v5h17.5"></path>
              <line x1="3" y1="10" x2="3" y2="14"></line>
              <line x1="8" y1="11" x2="8" y2="6"></line>
              <line x1="13" y1="11" x2="13" y2="6.5"></line>
              <line x1="3" y1="19" x2="21" y2="19"></line>
            </svg>
          </div>
          <div class="text-sm h-5 w-5 rounded-md flex justify-center items-center text-white bg-green-800">H</div>
          <div class="text-sm h-5 w-5 rounded-md flex justify-center items-center text-white bg-orange-400">K</div>
          <div class="text-sm h-5 w-5 rounded-md flex justify-center items-center text-white bg-blue-400">B</div>
          <div class="text-sm h-5 w-5 rounded-md flex justify-center items-center text-white bg-green-700">D</div>
          <div class="text-sm h-5 w-5 rounded-full flex justify-center items-center text-white bg-sky-800">4</div>
          <div class="text-sm h-5 w-5 rounded-full flex justify-center items-center text-black bg-orange-500">5</div>
          <div class="text-sm h-5 px-2 rounded-md flex justify-center items-center text-white bg-orange-500">26</div>
          <div class="text-sm h-5 px-2 rounded-md flex">...</div>
        </div>
      </div>
    </div>
    <div class="bg-white flex py-2">
      <div class="p-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bus" width="24" height="24" viewBox="0 0 24 24" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <circle cx="6" cy="17" r="2"></circle>
          <circle cx="18" cy="17" r="2"></circle>
          <path d="M4 17h-2v-11a1 1 0 0 1 1 -1h14a5 7 0 0 1 5 7v5h-2m-4 0h-8"></path>
          <polyline points="16 5 17.5 12 22 12"></polyline>
          <line x1="2" y1="10" x2="17" y2="10"></line>
          <line x1="7" y1="5" x2="7" y2="10"></line>
          <line x1="12" y1="5" x2="12" y2="10"></line>
        </svg>
      </div>
      <div>
        <div class="text-xs">Bus</div>
        <div class="font-semibold">Gare Nord<span class="font-normal ml-1">(Laval)</span></div>
        <div class="font-bold flex gap-2">
          <div class="text-sm h-5 px-2 rounded-md flex justify-center items-center text-white bg-orange-700">LANO</div>
        </div>
      </div>
    </div>
    <div class="bg-white flex py-2">
      <div class="p-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bus" width="24" height="24" viewBox="0 0 24 24" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <circle cx="6" cy="17" r="2"></circle>
          <circle cx="18" cy="17" r="2"></circle>
          <path d="M4 17h-2v-11a1 1 0 0 1 1 -1h14a5 7 0 0 1 5 7v5h-2m-4 0h-8"></path>
          <polyline points="16 5 17.5 12 22 12"></polyline>
          <line x1="2" y1="10" x2="17" y2="10"></line>
          <line x1="7" y1="5" x2="7" y2="10"></line>
          <line x1="12" y1="5" x2="12" y2="10"></line>
        </svg>
      </div>
      <div>
        <div class="text-xs">Bus</div>
        <div class="font-semibold">Gare SNCF Nord<span class="font-normal ml-1">(Morlaix)</span></div>
        <div class="font-bold flex gap-2">
          <div class="text-sm h-5 px-2 rounded-md flex justify-center items-center text-white bg-blue-900">L3VA</div>
        </div>
      </div>
    </div>
    <div class="bg-white flex py-2">
      <div class="p-4">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bus" width="24" height="24" viewBox="0 0 24 24" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
          <circle cx="6" cy="17" r="2"></circle>
          <circle cx="18" cy="17" r="2"></circle>
          <path d="M4 17h-2v-11a1 1 0 0 1 1 -1h14a5 7 0 0 1 5 7v5h-2m-4 0h-8"></path>
          <polyline points="16 5 17.5 12 22 12"></polyline>
          <line x1="2" y1="10" x2="17" y2="10"></line>
          <line x1="7" y1="5" x2="7" y2="10"></line>
          <line x1="12" y1="5" x2="12" y2="10"></line>
        </svg>
      </div>
      <div>
        <div class="text-xs">Bus</div>
        <div class="font-semibold">Gare SNCF Nord<span class="font-normal ml-1">(La Baule-Escoublac)</span></div>
        <div class="font-bold flex gap-2">
          <div class="text-sm h-5 px-2 rounded-md flex justify-center items-center text-white bg-blue-800">1</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="fixed bottom-0 bg-slate-900 w-screen flex text-white text-sm justify-around">
  <div class="p-4 flex flex-col justify-center items-center"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-route" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
   <circle cx="6" cy="19" r="2"></circle>
   <circle cx="18" cy="5" r="2"></circle>
   <path d="M12 19h4.5a3.5 3.5 0 0 0 0 -7h-8a3.5 3.5 0 0 1 0 -7h3.5"></path>
</svg>Voyager</div>
  <div class="p-4 flex flex-col justify-center items-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-qrcode" width="24" height="24" viewBox="0 0 24 24" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <rect x="4" y="4" width="6" height="6" rx="1"></rect>
      <line x1="7" y1="17" x2="7" y2="17.01"></line>
      <rect x="14" y="4" width="6" height="6" rx="1"></rect>
      <line x1="7" y1="7" x2="7" y2="7.01"></line>
      <rect x="4" y="14" width="6" height="6" rx="1"></rect>
      <line x1="17" y1="7" x2="17" y2="7.01"></line>
      <line x1="14" y1="14" x2="17" y2="14"></line>
      <line x1="20" y1="14" x2="20" y2="14.01"></line>
      <line x1="14" y1="14" x2="14" y2="17"></line>
      <line x1="14" y1="20" x2="17" y2="20"></line>
      <line x1="17" y1="17" x2="20" y2="17"></line>
      <line x1="20" y1="17" x2="20" y2="20"></line></svg
    >Billets
  </div>
  <div class="p-4 flex flex-col justify-center items-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-book" width="24" height="24" viewBox="0 0 24 24" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
      <path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
      <line x1="3" y1="6" x2="3" y2="19"></line>
      <line x1="12" y1="6" x2="12" y2="19"></line>
      <line x1="21" y1="6" x2="21" y2="19"></line></svg
    >Offres
  </div>
  <div class="p-4 flex flex-col justify-center items-center">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="0.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <circle cx="12" cy="7" r="4"></circle>
      <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path></svg
    >Compte
  </div>
</div>

How to create a SNCF Connect with Tailwind CSS?

To create a SNCF Connect UI component with Tailwind CSS, follow these simple steps:

  1. Create a basic HTML structure for the component, including a search bar, a list of available train options, and a booking form.

  2. Add the necessary Tailwind CSS classes to style the component, including classes for font size, font weight, color, padding, margin, and more.

  3. Customize the component to fit your specific needs, including changing the colors, fonts, and layout.

  4. Test the component to ensure that it is responsive and works correctly on all devices.

  5. Publish the component to your website or application and enjoy the benefits of a sleek and professional-looking UI component.

Conclusion

Creating a SNCF Connect UI component with Tailwind CSS is a straightforward and highly effective way to create a professional-looking UI component for your website or application. By following the steps outlined in this guide, you can create a sleek and functional component that is both visually appealing and highly functional. So what are you waiting for? Start creating your SNCF Connect UI component today!