Published on

6 Easy Ways To Build A Mobile Tabs With Tailwind CSS

Tags
Cards

mobile tabs

As a FrontEnd technology blogger, I am always looking for new ways to make my website more interactive and user-friendly. One of the best ways to do this is by adding mobile tabs to your website. In this article, I will show you how to create a mobile tabs UI component using Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to quickly and easily create custom designs without having to write any CSS code. It provides a set of pre-defined classes that you can use to style your HTML elements.

The description of mobile tabs UI component

Mobile tabs are a popular UI component that allows users to navigate between different sections of a website or app. They are particularly useful for mobile devices, where screen real estate is limited.

A mobile tabs UI component typically consists of a set of tabs at the top of the screen, with each tab representing a different section of the website or app. When the user clicks on a tab, the content for that section is displayed below the tabs.

Why use Tailwind CSS to create a mobile tabs UI component?

Tailwind CSS is an excellent choice for creating mobile tabs UI components because it provides a set of pre-defined classes that you can use to style your tabs and content. This means that you don't have to write any CSS code yourself, which saves you time and makes your code more maintainable.

The preview of mobile tabs UI component

To give you an idea of what a mobile tabs UI component looks like, here is a preview:

Free download of the mobile tabs's source code

The source code of mobile tabs UI component

If you're interested in seeing the source code for a mobile tabs UI component, here is an example:

<div class="max-h-screen h-screen max-w-md sm:w-auto bg-gray-900">
  <div class="relative h-full w-full">
    <div class="absolute inset-x-0 bottom-0 h-16 text-white mb-2 w-full mx-auto max-w-sm">
      <div class="flex flew-row w-full mx-auto h-full bg-gray-700 rounded-full px-3">
        <a class="my-auto w-1/5 rounded-full p-2 mx-auto" href="">
          <svg class="mx-auto" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 172 172" style=" fill:#000000;">
            <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
              <path d="M0,172v-172h172v172z" fill="none"></path>
              <g fill="#ffffff"><path d="M85.82503,14.33333c-1.14611,0.03914 -2.24966,0.44378 -3.14941,1.15479l-50.92953,40.12353c-6.46397,5.09418 -10.24609,12.87841 -10.24609,21.10807v68.40527c0,4.88621 4.07212,8.95833 8.95833,8.95833h35.83333c4.88621,0 8.95833,-4.07212 8.95833,-8.95833v-35.83333c0,-1.05724 0.73442,-1.79167 1.79167,-1.79167h17.91667c1.05724,0 1.79167,0.73442 1.79167,1.79167v35.83333c0,4.88621 4.07212,8.95833 8.95833,8.95833h35.83333c4.88621,0 8.95833,-4.07212 8.95833,-8.95833v-68.40527c0,-8.22966 -3.78213,-16.01389 -10.24609,-21.10807l-50.92953,-40.12353c-0.99396,-0.7852 -2.23327,-1.19417 -3.49935,-1.15479zM86,26.55306l47.60514,37.50602c3.8847,3.06149 6.14486,7.71798 6.14486,12.66064v66.61361h-32.25v-34.04167c0,-6.86192 -5.67974,-12.54167 -12.54167,-12.54167h-17.91667c-6.86192,0 -12.54167,5.67974 -12.54167,12.54167v34.04167h-32.25v-66.61361c0,-4.94267 2.26016,-9.59916 6.14486,-12.66064z"></path></g>
            </g></svg
        ></a>
        <a class="my-auto mx-2 rounded-full w-1/5 p-2" href="">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 172 172" style=" fill:#000000;">
            <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
              <path d="M0,172v-172h172v172z" fill="none"></path>
              <g fill="#ffffff"><path d="M48.16,30.96c-3.80281,0 -6.88,3.07719 -6.88,6.88v96.32c0,3.80281 3.07719,6.88 6.88,6.88h6.88c3.80281,0 6.88,-3.07719 6.88,-6.88v-37.84h48.16v37.84c0,3.80281 3.07719,6.88 6.88,6.88h6.88c3.80281,0 6.88,-3.07719 6.88,-6.88v-96.32c0,-3.80281 -3.07719,-6.88 -6.88,-6.88h-6.88c-3.80281,0 -6.88,3.07719 -6.88,6.88v37.84h-48.16v-37.84c0,-3.80281 -3.07719,-6.88 -6.88,-6.88zM24.08,44.72c-3.80281,0 -6.88,3.07719 -6.88,6.88v68.8c0,3.80281 3.07719,6.88 6.88,6.88h10.32v-82.56zM137.6,44.72v82.56h10.32c3.80281,0 6.88,-3.07719 6.88,-6.88v-68.8c0,-3.80281 -3.07719,-6.88 -6.88,-6.88zM3.44,75.68c-1.89469,0 -3.44,1.54531 -3.44,3.44v13.76c0,1.89469 1.54531,3.44 3.44,3.44h6.88v-20.64zM161.68,75.68v20.64h6.88c1.89469,0 3.44,-1.54531 3.44,-3.44v-13.76c0,-1.89469 -1.54531,-3.44 -3.44,-3.44z"></path></g>
            </g></svg
        ></a>
        <a class="my-auto mx-2 rounded-full h-14 text-center w-1/5 p-2" href="">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="50" height="50" class="-mt-1" viewBox="0 0 172 172" style=" fill:#000000;">
            <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
              <path d="M0,172v-172h172v172z" fill="none"></path>
              <g fill="#ffffff"><path d="M86,8.13074c-19.95469,0 -39.90938,7.59114 -55.09375,22.77551c-30.36875,30.36875 -30.36875,79.81875 0,110.1875c15.18437,15.18437 35.20625,22.84375 55.09375,22.84375c19.8875,0 39.90937,-7.65938 55.09375,-22.84375c30.36875,-30.36875 30.36875,-79.81875 0,-110.1875c-15.18438,-15.18437 -35.13906,-22.77551 -55.09375,-22.77551zM86,16.125c17.87188,0 35.7448,6.85208 49.45105,20.42395c27.14375,27.27812 27.14375,71.62397 0,98.9021c-27.27812,27.27812 -71.62187,27.27812 -98.76562,0c-27.27812,-27.27812 -27.28022,-71.62397 -0.13647,-98.9021c13.70625,-13.57187 31.57917,-20.42395 49.45105,-20.42395zM86,56.4375c-2.28437,0 -4.03125,1.74687 -4.03125,4.03125v21.5h-21.5c-2.28438,0 -4.03125,1.74688 -4.03125,4.03125c0,2.28437 1.74687,4.03125 4.03125,4.03125h21.5v21.5c0,2.28437 1.74688,4.03125 4.03125,4.03125c2.28437,0 4.03125,-1.74688 4.03125,-4.03125v-21.5h21.5c2.28437,0 4.03125,-1.74688 4.03125,-4.03125c0,-2.28437 -1.74688,-4.03125 -4.03125,-4.03125h-21.5v-21.5c0,-2.28438 -1.74688,-4.03125 -4.03125,-4.03125z"></path></g>
            </g></svg
        ></a>
        <a class="my-auto mx-2 rounded-full w-1/5  p-2" href="">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 172 172" style=" fill:#000000;">
            <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
              <path d="M0,172v-172h172v172z" fill="none"></path>
              <g fill="#ffffff"><path d="M39.69231,6.61538c-18.26983,0 -33.07692,14.80709 -33.07692,33.07692c0,18.26983 14.80709,33.07692 33.07692,33.07692c18.26983,0 33.07692,-14.80709 33.07692,-33.07692c0,-18.26983 -14.80709,-33.07692 -33.07692,-33.07692zM111.22115,6.61538c-3.15264,0.59435 -5.42668,3.38522 -5.375,6.61538v46.30769c0,3.64363 2.97176,6.61538 6.61538,6.61538h46.30769c3.64363,0 6.61538,-2.97176 6.61538,-6.61538v-46.30769c0,-3.64363 -2.97176,-6.61538 -6.61538,-6.61538h-46.30769c-0.20673,0 -0.41346,0 -0.62019,0c-0.20673,0 -0.41346,0 -0.62019,0zM119.07692,19.84615h33.07692v33.07692h-33.07692zM39.69231,99.23077c-18.26983,0 -33.07692,14.80709 -33.07692,33.07692c0,18.26983 14.80709,33.07692 33.07692,33.07692c18.26983,0 33.07692,-14.80709 33.07692,-33.07692c0,-18.26983 -14.80709,-33.07692 -33.07692,-33.07692zM132.30769,99.23077c-18.26983,0 -33.07692,14.80709 -33.07692,33.07692c0,18.26983 14.80709,33.07692 33.07692,33.07692c18.26983,0 33.07692,-14.80709 33.07692,-33.07692c0,-18.26983 -14.80709,-33.07692 -33.07692,-33.07692z"></path></g>
            </g></svg
        ></a>
        <a class="my-auto mx-2 rounded-full w-1/5 p-2" href="">
          <svg class=" " xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 172 172" style=" fill:#000000;">
            <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
              <path d="M0,172v-172h172v172z" fill="none"></path>
              <g fill="#ffffff"><path d="M86,26.875c-20.72315,0 -37.625,16.90185 -37.625,37.625c0,12.95459 6.61377,24.46045 16.62891,31.24219c-19.16943,8.23047 -32.75391,27.25293 -32.75391,49.38281h10.75c0,-23.80957 19.19043,-43 43,-43c23.80957,0 43,19.19043 43,43h10.75c0,-22.12988 -13.58447,-41.15234 -32.75391,-49.38281c10.01514,-6.78174 16.62891,-18.2876 16.62891,-31.24219c0,-20.72315 -16.90185,-37.625 -37.625,-37.625zM86,37.625c14.90723,0 26.875,11.96778 26.875,26.875c0,14.90723 -11.96777,26.875 -26.875,26.875c-14.90722,0 -26.875,-11.96777 -26.875,-26.875c0,-14.90722 11.96778,-26.875 26.875,-26.875z"></path></g>
            </g></svg
        ></a>
      </div>
    </div>
  </div>
</div>

How to create a mobile tabs with Tailwind CSS?

Now that you know what a mobile tabs UI component is and why you should use Tailwind CSS to create it, let's take a look at how to actually build it.

Step 1: Set up your HTML

The first step is to set up your HTML. You will need to create a set of tabs at the top of the screen, and then add the content for each tab below it. Here is an example:

<div class="tabs">
  <div class="tab">
    <input type="radio" name="tabs" id="tab1" checked>
    <label for="tab1">Tab 1</label>
    <div class="tab-content">
      <p>Content for Tab 1 goes here.</p>
    </div>
  </div>
  <div class="tab">
    <input type="radio" name="tabs" id="tab2">
    <label for="tab2">Tab 2</label>
    <div class="tab-content">
      <p>Content for Tab 2 goes here.</p>
    </div>
  </div>
  <div class="tab">
    <input type="radio" name="tabs" id="tab3">
    <label for="tab3">Tab 3</label>
    <div class="tab-content">
      <p>Content for Tab 3 goes here.</p>
    </div>
  </div>
</div>

In this example, we have created three tabs, each with its own content. We have used radio buttons and labels to create the tabs, and we have wrapped each tab and its content in a div with the class tab.

Step 2: Style your tabs

The next step is to style your tabs. Tailwind CSS provides a set of pre-defined classes that you can use to style your tabs. Here is an example:

<div class="tabs">
  <div class="tab">
    <input type="radio" name="tabs" id="tab1" checked>
    <label for="tab1" class="tab-label">Tab 1</label>
    <div class="tab-content">
      <p>Content for Tab 1 goes here.</p>
    </div>
  </div>
  <div class="tab">
    <input type="radio" name="tabs" id="tab2">
    <label for="tab2" class="tab-label">Tab 2</label>
    <div class="tab-content">
      <p>Content for Tab 2 goes here.</p>
    </div>
  </div>
  <div class="tab">
    <input type="radio" name="tabs" id="tab3">
    <label for="tab3" class="tab-label">Tab 3</label>
    <div class="tab-content">
      <p>Content for Tab 3 goes here.</p>
    </div>
  </div>
</div>

In this example, we have added the class tab-label to our labels, which will style them as tabs. We have also added the class tab-content to our content, which will hide it by default.

Step 3: Add interactivity

The final step is to add interactivity to your tabs. You will need to use JavaScript to listen for click events on your tabs and show or hide the content accordingly. Here is an example:

<div class="tabs">
  <div class="tab">
    <input type="radio" name="tabs" id="tab1" checked>
    <label for="tab1" class="tab-label">Tab 1</label>
    <div class="tab-content">
      <p>Content for Tab 1 goes here.</p>
    </div>
  </div>
  <div class="tab">
    <input type="radio" name="tabs" id="tab2">
    <label for="tab2" class="tab-label">Tab 2</label>
    <div class="tab-content">
      <p>Content for Tab 2 goes here.</p>
    </div>
  </div>
  <div class="tab">
    <input type="radio" name="tabs" id="tab3">
    <label for="tab3" class="tab-label">Tab 3</label>
    <div class="tab-content">
      <p>Content for Tab 3 goes here.</p>
    </div>
  </div>
</div>

<script>
  const tabs = document.querySelectorAll('.tab');

  tabs.forEach(tab => {
    const input = tab.querySelector('input');
    const content = tab.querySelector('.tab-content');

    input.addEventListener('click', () => {
      tabs.forEach(tab => {
        tab.querySelector('.tab-content').classList.remove('block');
        tab.querySelector('.tab-content').classList.add('hidden');
      });

      content.classList.remove('hidden');
      content.classList.add('block');
    });
  });
</script>

In this example, we have used JavaScript to listen for click events on our tabs. When a tab is clicked, we hide all of the content and then show the content for the selected tab.

Conclusion

In conclusion, creating a mobile tabs UI component with Tailwind CSS is a straightforward process that can greatly improve the user experience of your website or app. By following the steps outlined in this article, you can create a mobile tabs UI component that is both functional and visually appealing.