- Published on
Here Are 6 Ways To Make A Favourites Bar With Tailwind CSS
- What is Tailwind CSS?
- The description of Favourites Bar ui component
- Why use Tailwind CSS to build a Favourites Bar ui component?
- The preview of Favourites Bar ui component
- The source code of Favourites Bar ui component
- How to build a Favourites Bar with Tailwind CSS?
- Install tailwind css of verion 2.2.4
- All the unility class needed to build a Favourites Bar component
- 60 steps to build a Favourites Bar component with Tailwind CSS
- Conclusion
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.
The description of Favourites Bar ui component
Alpinejs favourites bar with search filter
Why use Tailwind CSS to build a Favourites Bar ui component?
- It can make the building process of Favourites Bar ui component faster and more easily.
- Enables building complex responsive layouts and components freely.
- Minimum lines of CSS code in Favourites Bar component file.
The preview of Favourites Bar ui component
Free download of the Favourites Bar's source code
The source code of Favourites Bar ui component
<div class="min-w-screen min-h-screen bg-gray-50 flex items-center justify-center px-5 pt-5 pb-56">
<div class="bg-white rounded shadow-lg border border-gray-200 py-2 px-5" x-data="{favourites:favourites()}">
<!-- Loop Favourites -->
<template x-for="(item, index) in favourites.saved()" :key="index">
<span class="inline-block align-top text-center mr-2">
<a :href="item.href" class="text-gray-700 hover:text-indigo-500 focus:text-indigo-500 leading-10 text-2xl inline-block w-8 h-10 focus:outline-none" :title="item.title">
<i class="mdi" :class="'mdi-'+item.icon"></i>
</a>
</span>
</template>
<!-- Search Favourites -->
<span class="inline-block align-top relative" @click.away="favourites.showSearch=false">
<!-- Favourites Button -->
<button class="text-yellow-500 hover:text-yellow-400 leading-10 text-3xl focus:outline-none text-left w-8 h-10" @click.prevent="favourites.showSearch=!favourites.showSearch;$nextTick(()=>setTimeout(function(){if(favourites.showSearch)$refs.searchField.focus()},200))">
<i class="mdi mdi-star"></i>
</button>
<!-- Favourites Dropdown -->
<div class="bg-white text-gray-700 shadow-md rounded border border-gray-200 text-sm absolute mt-12 -ml-2 md:-mr-3 top-0 left-0 min-w-full w-56 z-30" x-show="favourites.showSearch" style="display: none;" x-transition:enter="transition ease duration-300 transform" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease duration-300 transform" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-4">
<span class="absolute top-0 left-0 w-3 h-3 bg-white border border-gray-200 transform rotate-45 -mt-1 ml-4"></span>
<div class="bg-white overflow-auto rounded w-full relative z-10">
<!-- Search Input Field -->
<div class="p-1">
<input type="text" class="form-input block w-full px-3 h-10 leading-10 border-2 border-indigo-500 focus:border-primary-500 rounded outline-none" placeholder="Start typing..." x-ref="searchField" x-model="favourites.search">
</div>
<!-- Filtered Options -->
<ul x-show="favourites.filteredOptions().length">
<!-- Loop Filtered Options -->
<template x-for="(option,index) in favourites.filteredOptions()">
<li>
<a href="javascript:void(0);" class="flex hover:bg-gray-200 w-full h-10 leading-none items-center focus:outline-none focus:bg-gray-200">
<span class="block w-10 text-center text-xl">
<i class="mdi" :class="'mdi-'+option.icon"></i>
</span>
<span class="block flex-1 truncate" x-text="option.title"></span>
<span class="block w-10 text-center text-2xl" :class="{'text-yellow-500':option.saved}" @click.prevent="favourites.addToFavorites(option.index)">
<i class="mdi mdi-star-outline"></i>
</span>
</a>
</li>
</template>
</ul>
</div>
</div>
</span>
</div>
</div>
<!-- BUY ME A BEER AND HELP SUPPORT OPEN-SOURCE RESOURCES -->
<div class="flex items-end justify-end fixed bottom-0 right-0 mb-4 mr-4 z-10">
<div>
<a title="Buy me a beer" href="https://www.buymeacoffee.com/scottwindon" target="_blank" class="block w-16 h-16 rounded-full transition-all shadow hover:shadow-lg transform hover:scale-110 hover:rotate-12">
<img class="object-cover object-center w-full h-full rounded-full" src="https://i.pinimg.com/originals/60/fd/e8/60fde811b6be57094e0abc69d9c2622a.jpg"/>
</a>
</div>
</div>
<style>@import url('https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.3.45/css/materialdesignicons.min.css');</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/alpine.min.js"></script>
<script>
let favourites = function() {
return {
search: "",
showSearch: false,
options: [
{
title: 'Calender',
icon: 'calendar-month-outline',
href: 'javascript:void(0);',
saved: true
},
{
title: 'Chart',
icon: 'cart-outline',
href: 'javascript:void(0);'
},
{
title: 'Chat',
icon: 'comment-multiple-outline',
href: 'javascript:void(0);'
},
{
title: 'Inbox',
icon: 'email-outline',
href: 'javascript:void(0);',
saved: true
},
{
title: 'Photos',
icon: 'camera-outline',
href: 'javascript:void(0);'
},
{
title: 'Todo',
icon: 'checkbox-marked-outline',
href: 'javascript:void(0);',
saved: true
},
],
saved: function() {
return this.options.filter((option, index) => {
option.index = index;
return option.saved ? true : false;
});
},
filteredOptions() {
return !this.search.length ? [] : this.options.filter((option, index) => {
option.index = index;
return option.title.toLowerCase().includes(this.search.toLowerCase());
});
},
addToFavorites(index) {
this.options[index].saved = !this.options[index].saved;
}
}
}
</script>
How to build a Favourites Bar with Tailwind CSS?
Install tailwind css of verion 2.2.4
Use the script html tag to import the script of Tailwind CSS of the version 2.2.4
<script src="https://cdn.tailwindcss.com"></script>
All the unility class needed to build a Favourites Bar component
min-w-screenmin-h-screenbg-gray-50flexpx-5pt-5pb-56bg-whiteborder-gray-200py-2inline-blocktext-centermr-2text-gray-700hover:text-indigo-500focus:text-indigo-500text-2xlw-8h-10relativetext-yellow-500hover:text-yellow-400text-3xltext-lefttext-smabsolutemt-12-ml-2md:-mr-3top-0left-0min-w-fullw-56z-30w-3h-3-mt-1ml-4overflow-autow-fullz-10p-1blockpx-3border-2border-indigo-500focus:border-primary-500hover:bg-gray-200focus:bg-gray-200w-10text-xlflex-1fixedbottom-0right-0mb-4mr-4w-16h-16h-full
60 steps to build a Favourites Bar component with Tailwind CSS
Set the minimum width/height of an element using the
min-w-screenutilities.Set the minimum width/height of an element using the
min-h-screenutilities.Control the background color of an element to gray-50 using the
bg-gray-50utilities.Use
flexto create a block-level flex container.Control the horizontal padding of an element to 1.25rem using the
px-5utilities.Control the padding on top side of an element to 1.25rem using the
pt-5utilities.Control the padding on bottom side of an element to 14rem using the
pb-56utilities.Control the background color of an element to white using the
bg-whiteutilities.Control the border color of an element to gray-200 using the
border-gray-200utilities.Control the vertical padding of an element to 0.5rem using the
py-2utilities.Use
inline-blockutilities to wrap the element to prevent the text inside from extending beyond its parent.Control the text color of an element to center using the
text-centerutilities.Control the margin on right side of an element to 0.5rem using the
mr-2utilities.Control the text color of an element to gray-700 using the
text-gray-700utilities.Control the text color of an element to indigo-500 on hover using the
hover:text-indigo-500utilities.Control the text color of an element to indigo-500 on focus using the
focus:text-indigo-500utilities.Control the text color of an element to 2xl using the
text-2xlutilities.Use
w-8to set an element to a fixed width(2rem).Use
h-10to set an element to a fixed height(2.5rem).Use
relativeto position an element according to the normal flow of the document.Control the text color of an element to yellow-500 using the
text-yellow-500utilities.Control the text color of an element to yellow-400 on hover using the
hover:text-yellow-400utilities.Control the text color of an element to 3xl using the
text-3xlutilities.Control the text color of an element to left using the
text-leftutilities.Control the text color of an element to sm using the
text-smutilities.Use
absoluteto position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.Control the margin on top side of an element to 3rem using the
mt-12utilities.Control the margin on left side of an element to -0.5rem using the
-ml-2utilities.Control the margin on right side of an element to -0.75rem at only medium screen sizes using the
md:-mr-3utilities.Use the
top-0utilities to set the top position of a positioned element to 0rem.Use the
left-0utilities to set the left position of a positioned element to 0rem.Set the minimum width/height of an element using the
min-w-fullutilities.Use
w-56to set an element to a fixed width(14rem).Control the stack order (or three-dimensional positioning) of an element to 30 in Tailwind, regardless of order it has been displayed, using the
z-30utilities.Use
w-3to set an element to a fixed width(0.75rem).Use
h-3to set an element to a fixed height(0.75rem).Control the margin on top side of an element to -0.25rem using the
-mt-1utilities.Control the margin on left side of an element to 1rem using the
ml-4utilities.Use
overflow-autoto add scrollbars to an element in the event that its content overflows the bounds of that element. Unlike.overflow-scroll, which always shows scrollbars, this utility will only show them if scrolling is necessary.Use
w-fullto set an element to a 100% based width.Control the stack order (or three-dimensional positioning) of an element to 10 in Tailwind, regardless of order it has been displayed, using the
z-10utilities.Control the padding on all sides of an element to 0.25rem using the
p-1utilities.Use
inlineutilities to put the element on its own line and fill its parent.Control the horizontal padding of an element to 0.75rem using the
px-3utilities.Control the border color of an element to 0.5rem using the
border-2utilities.Control the border color of an element to indigo-500 using the
border-indigo-500utilities.Control the border color of an element to primary-500 using the
focus:border-primary-500utilities on focus.Control the background color of an element to gray-200 using the
hover:bg-gray-200utilities on hover.Control the background color of an element to gray-200 using the
focus:bg-gray-200utilities on focus.Use
w-10to set an element to a fixed width(2.5rem).Control the text color of an element to xl using the
text-xlutilities.Use
flexto create a block-level flex container.Use
fixedto position an element relative to the browser window.Use the
bottom-0utilities to set the bottom position of a positioned element to 0rem.Use the
right-0utilities to set the right position of a positioned element to 0rem.Control the margin on bottom side of an element to 1rem using the
mb-4utilities.Control the margin on right side of an element to 1rem using the
mr-4utilities.Use
w-16to set an element to a fixed width(4rem).Use
h-16to set an element to a fixed height(4rem).Use
h-fullto set an element’s height to 100% of its parent, as long as the parent has a defined height.
Conclusion
The above is a step-by-step tutorial on how to use Tailwind CSS to build a Favourites Bar components, learn and follow along to implement your own components.