Useful UI Snippets for Beginners
Hamza Ahmad
Posted on February 15, 2022
UI snippets are combined to make web designs or we can say User Interfaces. Different snippets add interactivity to a web page. Although, there are countless UI snippets that can be used to make a web page in countless different ways some snippets are used very commonly and have become somewhat essential for a UI design. A lot of developers have to reuse the same UI snippets for different UI designs. I have listed down some common UI snippets for the most common use cases.
Buttons
Used for taking actions, buttons are probably the most important element for your UI designs. Since they allow user to interact with the site and are extremely crucial components, it’s good to have UI snippets for buttons at your disposal all the time.
`<div class="py-6 flex justify-center">
<dh-component>
<div class="mx-2 my-2 px-6 flex flex-wrap">
<button class="mx-2 my-2 bg-gray-300 transition duration-150 ease-in-out hover:bg-gray-400 rounded text-indigo-700 px-8 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700">Button</button>
<button class="mx-2 my-2 bg-indigo-700 transition duration-150 ease-in-out hover:bg-indigo-600 rounded text-white px-8 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600">Button</button>
<a href="javascript: void(0)" class="mx-2 my-2 flex items-center bg-white transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-600 rounded border border-gray-600 text-gray-500 pl-3 pr-6 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
<span class="h-4 w-4 mr-2">
<svg xmlns="www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<rect x="3" y="5" width="18" height="14" rx="2" />
<polyline points="3 7 12 13 21 7" />
</svg>
</span>
Button
</a>
</div>
</dh-component>
</div>`
Input Group
Talking about input control, another UI snippet that is just as important as the button is a input group. Used to write various information from the user end, input groups are a must-have UI snippet for every developer.
<div class="flex lg:flex-row flex-col items-center py-8 px-4">
<div class="flex flex-col lg:mr-16">
<label for="email1" class="text-gray-800 dark:text-gray-100 text-sm font-bold leading-tight tracking-normal mb-2">Email</label>
<div class="relative">
<div class="absolute text-gray-600 dark:text-gray-400 flex items-center pl-4 h-full cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<rect x="3" y="5" width="18" height="14" rx="2" />
<polyline points="3 7 12 13 21 7" />
</svg>
</div>
<input id="email1" class="text-gray-600 dark:text-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 dark:focus:border-indigo-700 dark:border-gray-700 dark:bg-gray-800 bg-white font-normal w-64 h-10 flex items-center pl-12 text-sm border-gray-300 rounded border shadow" placeholder="Placeholder" />
</div>
</div>
<div class="flex flex-col lg:mr-16 lg:py-0 py-4">
<label for="email2" class="text-gray-800 dark:text-gray-100 text-sm font-bold leading-tight tracking-normal mb-2">Email</label>
<div class="relative">
<div class="absolute text-gray-600 dark:text-gray-400 flex items-center px-4 border-r dark:border-gray-700 h-full cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<rect x="3" y="5" width="18" height="14" rx="2" />
<polyline points="3 7 12 13 21 7" />
</svg>
</div>
<input id="email2" class="text-gray-600 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 dark:text-gray-400 focus:outline-none dark:focus:border-indigo-700 dark:border-gray-700 dark:bg-gray-800 bg-white font-normal w-64 h-10 flex items-center pl-16 text-sm border-gray-300 rounded border shadow" placeholder="Placeholder" />
</div>
</div>
<div class="flex flex-col lg:py-0 py-4">
<label for="email3" class="text-gray-800 dark:text-gray-100 text-sm font-bold leading-tight tracking-normal mb-2">Email</label>
<div class="relative">
<div class="absolute text-white flex items-center px-4 border-r dark:border-gray-700 h-full bg-indigo-700 dark:bg-indigo-600 rounded-l cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="18" height="18" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<rect x="3" y="5" width="18" height="14" rx="2" />
<polyline points="3 7 12 13 21 7" />
</svg>
</div>
<input id="email3" class="text-gray-600 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 dark:text-gray-400 focus:outline-none dark:focus:border-indigo-700 dark:border-gray-700 dark:bg-gray-800 bg-white font-normal w-64 h-10 flex items-center pl-16 text-sm border-gray-300 rounded border shadow" placeholder="Placeholder" />
</div>
</div>
</div>
Search Fileds
Search Fields help users navigate through your websites easily. These days it’s very rare to see a website without a search field. This tells how important it is for your design.
<div class="flex justify-center">
<div class="mb-3 xl:w-96">
<div class="input-group relative flex flex-wrap items-stretch w-full mb-4">
<input type="search" class="form-control relative flex-auto min-w-0 block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" placeholder="Search" aria-label="Search" aria-describedby="button-addon2">
<button class="btn inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out flex items-center" type="button" id="button-addon2">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</svg>
</button>
</div>
</div>
</div>
Message Boxes
Message boxes come under the category of informational components. It shares information with the user. Many new websites have message boxes in the design telling people about the new updates or sharing helpful information. Not having a Message Box UI snippet would not be recommended if you regularly work on UIs.
<div class="flex items-center justify-center px-4">
<div id="alert" tabindex="0" class="focus:outline-none transition duration-150 ease-in-out w-full lg:w-11/12 mx-auto bg-white dark:bg-gray-800 shadow rounded flex flex-col py-4 md:py-0 items-center md:flex-row justify-between">
<div class="flex flex-col items-center md:flex-row">
<div class="mr-3 p-4 bg-green-400 rounded md:rounded-tr-none md:rounded-br-none text-white">
<img class="focus:outline-none" src="https://tuk-cdn.s3.amazonaws.com/can-uploader/simple-with-action-links-success-svg1.svg" alt="success" />
</div>
<p class="mr-2 text-base font-bold text-gray-800 dark:text-gray-100 mt-2 md:my-0">Success</p>
<div class="h-1 w-1 bg-gray-300 dark:bg-gray-700 rounded-full mr-2 hidden xl:block"></div>
<p class="text-sm lg:text-base dark:text-gray-400 text-gray-600 lg:pt-1 xl:pt-0 sm:mb-0 mb-2 text-center sm:text-left">Your Payment was successful. You can now use our services.</p>
</div>
<div class="flex xl:items-center lg:items-center sm:justify-end justify-center pr-4">
<button class="focus:outline-none focus:text-indigo-500 hover:text-indigo-500 text-sm mr-4 font-bold cursor-pointer text-indigo-700 dark:text-indigo-600">Details</button>
<button class="focus:outline-none focus:text-gray-400 hover:text-gray-400 text-sm cursor-pointer text-gray-600 dark:text-gray-400" onclick="closeAlert()">Dismiss</button>
</div>
</div>
</div>
Grid
Grid is normally designed for responsive designs. Grids give structure to your web page. However, it is important to know when to use a grid. Having a UI snippet for grids is quite normal among devs now.
<div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 pt-6 gap-8">
<div class="rounded border-gray-300 dark:border-gray-700 border-dashed border-2 h-24"></div>
<div class="rounded border-gray-300 dark:border-gray-700 border-dashed border-2 h-24"></div>
</div>
Card
Probably the most popular UI element these days in cards. They are small rectangular or square boxes that hold different information. You will be using a card UI snippet in almost all of your projects.
<div class="w-full py-10">
<div class="container mx-auto px-6 flex items-start justify-center">
<div class="w-full">
<dh-component>
<!-- Card is full width. Use in 4 col grid for best view. -->
<!-- Card code block start -->
<div class="grid sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
<a href="javascript:void(0)" class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600 hover:bg-gray-100 bg-white"><div class=" dark:bg-gray-800 rounded shadow p-6">
<div class="flex items-center justify-between w-full sm:w-full mb-8">
<div class="flex items-center">
<div class="p-4 bg-blue-200 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-discount" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2B6CB0" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<line x1="9" y1="15" x2="15" y2="9" />
<circle cx="9.5" cy="9.5" r=".5" />
<circle cx="14.5" cy="14.5" r=".5" />
<path d="M5 7.2a2.2 2.2 0 0 1 2.2 -2.2h1a2.2 2.2 0 0 0 1.55 -.64l.7 -.7a2.2 2.2 0 0 1 3.12 0l.7 .7a2.2 2.2 0 0 0 1.55 .64h1a2.2 2.2 0 0 1 2.2 2.2v1a2.2 2.2 0 0 0 .64 1.55l.7 .7a2.2 2.2 0 0 1 0 3.12l-.7 .7a2.2 2.2 0 0 0 -.64 1.55 v1a2.2 2.2 0 0 1 -2.2 2.2h-1a2.2 2.2 0 0 0 -1.55 .64l-.7 .7a2.2 2.2 0 0 1 -3.12 0l-.7 -.7a2.2 2.2 0 0 0 -1.55 -.64h-1a2.2 2.2 0 0 1 -2.2 -2.2v-1a2.2 2.2 0 0 0 -.64 -1.55l-.7 -.7a2.2 2.2 0 0 1 0 -3.12l.7 -.7a2.2 2.2 0 0 0 .64 -1.55 v-1" />
</svg>
</div>
<div class="ml-6">
<h3 class="mb-1 leading-5 text-gray-800 dark:text-gray-100 font-bold text-2xl">2,330</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm tracking-normal font-normal leading-5">Avg Sales</p>
</div>
</div>
<div>
<div class="flex items-center pl-3 text-green-700">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trending-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="3 17 9 11 13 15 21 7" />
<polyline points="14 7 21 7 21 14" />
</svg>
<p class="text-green-700 text-xs tracking-wide font-bold leading-normal pl-1">7.2%</p>
</div>
<p class="font-normal text-xs text-right leading-4 text-green-700 tracking-normal">Increase</p>
</div>
</div>
<div class="relative mb-3">
<hr class="h-1 rounded-sm bg-gray-200" />
<hr class="absolute top-0 h-1 w-7/12 rounded-sm bg-indigo-700 border-indigo-700 left-0" />
</div>
<h4 class="text-base text-gray-600 dark:text-gray-400 font-normal tracking-normal leading-5">Yearly Goal</h4>
</div></a>
<a href="javascript:void(0)" class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600 hover:bg-gray-100 bg-white"><div class=" dark:bg-gray-800 rounded shadow p-6">
<div class="flex items-center justify-between w-full sm:w-full mb-8">
<div class="flex items-center">
<div class="p-4 bg-yellow-200 rounded-lg text-green-800">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-click" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#C05621" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<line x1="3" y1="12" x2="6" y2="12" />
<line x1="12" y1="3" x2="12" y2="6" />
<line x1="7.8" y1="7.8" x2="5.6" y2="5.6" />
<line x1="16.2" y1="7.8" x2="18.4" y2="5.6" />
<line x1="7.8" y1="16.2" x2="5.6" y2="18.4" />
<path d="M12 12l9 3l-4 2l-2 4l-3 -9" />
</svg>
</div>
<div class="ml-6">
<h3 class="mb-1 leading-5 text-gray-800 dark:text-gray-100 font-bold text-2xl">2,330</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm tracking-normal font-normal leading-5">Avg Clicks</p>
</div>
</div>
<div>
<div class="flex items-center text-red-700">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trending-down" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="3 7 9 13 13 9 21 17" />
<polyline points="21 10 21 17 14 17" />
</svg>
<p class="text-red-700 text-xs tracking-wide font-bold leading-normal pl-1">3.4%</p>
</div>
<p class="font-normal text-right text-xs leading-4 text-red-700 tracking-normal pb-1">Decrease</p>
</div>
</div>
<div class="relative mb-3">
<hr class="h-1 rounded-sm bg-gray-200" />
<hr class="absolute top-0 h-1 w-7/12 rounded-sm bg-indigo-700 border-indigo-700 left-0" />
</div>
<h4 class="text-base text-gray-600 dark:text-gray-400 font-normal tracking-normal leading-5">Yearly Goal</h4>
</div></a>
<a href="javascript:void(0)" class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600 hover:bg-gray-100 bg-white"><div class=" dark:bg-gray-800 rounded shadow p-6">
<div class="flex items-center justify-between w-full sm:w-full mb-8">
<div class="flex items-center">
<div class="p-4 bg-green-200 rounded-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-credit-card" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#276749" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<rect x="3" y="5" width="18" height="14" rx="3" />
<line x1="3" y1="10" x2="21" y2="10" />
<line x1="7" y1="15" x2="7.01" y2="15" />
<line x1="11" y1="15" x2="13" y2="15" />
</svg>
</div>
<div class="ml-6">
<h3 class="mb-1 leading-5 text-gray-800 dark:text-gray-100 font-bold text-2xl">2,330</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm tracking-normal font-normal leading-5">Profit Earned</p>
</div>
</div>
<div>
<div class="flex items-center pl-3 text-green-700">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trending-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<polyline points="3 17 9 11 13 15 21 7" />
<polyline points="14 7 21 7 21 14" />
</svg>
<p class="text-green-700 text-xs tracking-wide font-bold leading-normal pl-1">12%</p>
</div>
<p class="font-normal text-xs text-right leading-4 text-green-700 tracking-normal pb-1">Increase</p>
</div>
</div>
<div class="relative mb-3">
<hr class="h-1 rounded-sm bg-gray-200" />
<hr class="absolute top-0 h-1 w-7/12 rounded-sm bg-indigo-700 border-indigo-700 left-0" />
</div>
<h4 class="text-base text-gray-600 dark:text-gray-400 font-normal tracking-normal leading-5">Yearly Goal</h4>
</div></a>
</div>
<!-- Card code block end -->
</dh-component>
</div>
</div>
</div>
Dropdown
We all have come across a dropdown to select the preferred option while going through a website. Normally famous among E-commerce websites but dropdown has its application in various different domains now.
<div class="flex justify-center">
<div>
<div class="dropdown relative">
<a
class="
dropdown-toggle
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
href="#"
type="button"
id="dropdownMenuButton2"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown link
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</a>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton2"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
</div>
</div>
Radio Buttons
Radio buttons are used for users to choose one option among multiple options. They are often confused with checkboxes. The difference is only one which is that a checkbox is used for selecting one or more options while a radio button is used to select only one option.
<div>
<div onclick="onClickOne(1)" id="borderOne" class="hover:shadow-md duration-100 cursor-pointer w-full bg-white flex flex-col justify-start items-start md:p-6 p-4 border border-gray-300 rounded mb-6">
<div class="flex flex-row justify-start items-start">
<div class="bg-white dark:bg-gray-100 rounded-full w-4 h-4 flex flex-shrink-0 justify-center items-center relative mt-0.5">
<input id="checkboxOne" aria-label="label1" type="radio" name="radio" class="checkbox appearance-none focus:outline-none border rounded-full border-gray-200 absolute cursor-pointer w-full h-full checked:border-none" />
<div id="check-icon1" class="check-icon hidden border border-blue-700 rounded-full w-full h-full z-1 flex items-center justify-center">
<div class="w-2 h-2 bg-white rounded-full bg-blue-700"></div>
</div>
</div>
<div class="w-full flex flex-col justify-start items-start ml-4">
<p id="headingOne" class="text-gray-800 text-base text-left leading-4 mb-3 font-semibold">Small</p>
<p class="text-gray-600 text-sm font-regular text-left leading-3.5">If that’s the size you wear please select this one or choose any other.</p>
</div>
</div>
</div>
<div onclick="onClickOne(2)" id="borderTwo" class="hover:shadow-md duration-100 cursor-pointer w-full bg-white flex flex-col justify-start items-start md:p-6 p-4 border border-gray-300 rounded mb-6">
<div class="flex flex-row justify-start items-start">
<div class="bg-white dark:bg-gray-100 rounded-full w-4 h-4 flex flex-shrink-0 justify-center items-center relative mt-0.5">
<input id="checkboxTwo" aria-label="label1" type="radio" name="radio" class="checkbox appearance-none focus:outline-none border rounded-full border-gray-200 absolute cursor-pointer w-full h-full checked:border-none" />
<div id="check-icon2" class="check-icon hidden border border-blue-700 rounded-full w-full h-full z-1 flex items-center justify-center">
<div class="w-2 h-2 bg-white rounded-full bg-blue-700"></div>
</div>
</div>
<div class="w-full flex flex-col justify-start items-start ml-4">
<p id="headingTwo" class="text-gray-800 text-base text-left leading-4 mb-3 font-semibold">Medium</p>
<p class="text-gray-600 text-sm font-regular text-left leading-3.5">If that’s the size you wear please select this one or choose any other.</p>
</div>
</div>
</div>
<div onclick="onClickOne(3)" id="borderThree" class="hover:shadow-md duration-100 cursor-pointer w-full bg-white flex flex-col justify-start items-start md:p-6 p-4 border border-gray-300 rounded mb-6">
<div class="flex flex-row justify-start items-start">
<div class="bg-white dark:bg-gray-100 rounded-full w-4 h-4 flex flex-shrink-0 justify-center items-center relative mt-0.5">
<input id="checkboxThree" aria-label="label1" type="radio" name="radio" class="checkbox appearance-none focus:outline-none border rounded-full border-gray-200 absolute cursor-pointer w-full h-full checked:border-none" />
<div id="check-icon3" class="check-icon hidden border border-blue-700 rounded-full w-full h-full z-1 flex items-center justify-center">
<div class="w-2 h-2 bg-white rounded-full bg-blue-700"></div>
</div>
</div>
<div class="w-full flex flex-col justify-start items-start ml-4">
<p id="headingThree" class="text-gray-800 text-base text-left leading-4 mb-3 font-semibold">Large</p>
<p class="text-gray-600 text-sm font-regular text-left leading-3.5">If that’s the size you wear please select this one or choose any other.</p>
</div>
</div>
</div>
<div onclick="onClickOne(4)" id="borderFour" class="hover:shadow-md duration-100 cursor-pointer w-full bg-white flex flex-col justify-start items-start md:p-6 p-4 border border-gray-300 rounded mb-6">
<div class="flex flex-row justify-start items-start">
<div class="bg-white dark:bg-gray-100 rounded-full w-4 h-4 flex flex-shrink-0 justify-center items-center relative mt-0.5">
<input id="checkboxFour" aria-label="label1" type="radio" name="radio" class="checkbox appearance-none focus:outline-none border rounded-full border-gray-200 absolute cursor-pointer w-full h-full checked:border-none" />
<div id="check-icon4" class="check-icon hidden border border-blue-700 rounded-full w-full h-full z-1 flex items-center justify-center">
<div class="w-2 h-2 bg-white rounded-full bg-blue-700"></div>
</div>
</div>
<div class="w-full flex flex-col justify-start items-start ml-4">
<p id="headingFour" class="text-gray-800 text-base text-left leading-4 mb-3 font-semibold">Extra Large</p>
<p class="text-gray-600 text-sm font-regular text-left leading-3.5">If that’s the size you wear please select this one or choose any other.</p>
</div>
</div>
</div>
</div>
<script>
const onClickOne = (flag) => {
switch (flag) {
case 1:
// Active
document.getElementById("headingOne").classList.remove("text-gray-800");
document.getElementById("borderOne").classList.remove("border-gray-300");
document.getElementById("headingOne").classList.add("text-blue-700");
document.getElementById("borderOne").classList.add("border-blue-700");
document.getElementById("check-icon1").classList.remove("hidden");
document.getElementById("checkboxOne").classList.remove("border-gray-200");
document.getElementById("checkboxOne").classList.add("border-blue-700");
// Active
document.getElementById("headingTwo").classList.add("text-gray-800");
document.getElementById("headingTwo").classList.remove("text-blue-700");
document.getElementById("borderTwo").classList.remove("border-blue-700");
document.getElementById("borderTwo").classList.add("border-gray-300");
document.getElementById("check-icon2").classList.add("hidden");
document.getElementById("checkboxTwo").classList.add("border-gray-200");
document.getElementById("checkboxTwo").classList.remove("border-blue-700");
document.getElementById("headingThree").classList.add("text-gray-800");
document.getElementById("headingThree").classList.remove("text-blue-700");
document.getElementById("borderThree").classList.remove("border-blue-700");
document.getElementById("borderThree").classList.add("border-gray-300");
document.getElementById("check-icon3").classList.add("hidden");
document.getElementById("checkboxThree").classList.add("border-gray-200");
document.getElementById("checkboxThree").classList.remove("border-blue-700");
document.getElementById("headingFour").classList.add("text-gray-800");
document.getElementById("headingFour").classList.remove("text-blue-700");
document.getElementById("borderFour").classList.remove("border-blue-700");
document.getElementById("borderFour").classList.add("border-gray-300");
document.getElementById("check-icon4").classList.add("hidden");
document.getElementById("checkboxFour").classList.add("border-gray-200");
document.getElementById("checkboxFour").classList.remove("border-blue-700");
break;
case 2:
// Active
document.getElementById("headingTwo").classList.remove("text-gray-800");
document.getElementById("headingTwo").classList.add("text-blue-700");
document.getElementById("borderTwo").classList.add("border-blue-700");
document.getElementById("borderTwo").classList.remove("border-gray-300");
document.getElementById("check-icon2").classList.remove("hidden");
document.getElementById("checkboxTwo").classList.remove("border-gray-200");
document.getElementById("checkboxTwo").classList.add("border-blue-700");
// Active
document.getElementById("headingOne").classList.add("text-gray-800");
document.getElementById("headingOne").classList.remove("text-blue-700");
document.getElementById("borderOne").classList.remove("border-blue-700");
document.getElementById("borderOne").classList.add("border-gray-300");
document.getElementById("check-icon1").classList.add("hidden");
document.getElementById("checkboxOne").classList.add("border-gray-200");
document.getElementById("checkboxOne").classList.remove("border-blue-700");
document.getElementById("headingThree").classList.add("text-gray-800");
document.getElementById("headingThree").classList.remove("text-blue-700");
document.getElementById("borderThree").classList.remove("border-blue-700");
document.getElementById("borderThree").classList.add("border-gray-300");
document.getElementById("check-icon3").classList.add("hidden");
document.getElementById("checkboxThree").classList.add("border-gray-200");
document.getElementById("checkboxThree").classList.remove("border-blue-700");
document.getElementById("headingFour").classList.add("text-gray-800");
document.getElementById("headingFour").classList.remove("text-blue-700");
document.getElementById("borderFour").classList.remove("border-blue-700");
document.getElementById("borderFour").classList.add("border-gray-300");
document.getElementById("check-icon4").classList.add("hidden");
document.getElementById("checkboxFour").classList.add("border-gray-200");
document.getElementById("checkboxFour").classList.remove("border-blue-700");
break;
case 3:
// Active
document.getElementById("headingThree").classList.remove("text-gray-800");
document.getElementById("headingThree").classList.add("text-blue-700");
document.getElementById("borderThree").classList.add("border-blue-700");
document.getElementById("borderThree").classList.remove("border-gray-300");
document.getElementById("check-icon3").classList.remove("hidden");
document.getElementById("checkboxThree").classList.remove("border-gray-200");
document.getElementById("checkboxThree").classList.add("border-blue-700");
// Active
document.getElementById("headingTwo").classList.add("text-gray-800");
document.getElementById("headingTwo").classList.remove("text-blue-700");
document.getElementById("borderTwo").classList.remove("border-blue-700");
document.getElementById("borderTwo").classList.add("border-gray-300");
document.getElementById("check-icon2").classList.add("hidden");
document.getElementById("checkboxTwo").classList.add("border-gray-200");
document.getElementById("checkboxTwo").classList.remove("border-blue-700");
document.getElementById("headingOne").classList.add("text-gray-800");
document.getElementById("headingOne").classList.remove("text-blue-700");
document.getElementById("borderOne").classList.remove("border-blue-700");
document.getElementById("borderOne").classList.add("border-gray-300");
document.getElementById("check-icon1").classList.add("hidden");
document.getElementById("checkboxOne").classList.add("border-gray-200");
document.getElementById("checkboxOne").classList.remove("border-blue-700");
document.getElementById("headingFour").classList.add("text-gray-800");
document.getElementById("headingFour").classList.remove("text-blue-700");
document.getElementById("borderFour").classList.remove("border-blue-700");
document.getElementById("borderFour").classList.add("border-gray-300");
document.getElementById("check-icon4").classList.add("hidden");
document.getElementById("checkboxFour").classList.add("border-gray-200");
document.getElementById("checkboxFour").classList.remove("border-blue-700");
break;
case 4:
// Active
document.getElementById("headingFour").classList.remove("text-gray-800");
document.getElementById("headingFour").classList.add("text-blue-700");
document.getElementById("borderFour").classList.add("border-blue-700");
document.getElementById("borderFour").classList.remove("border-gray-300");
document.getElementById("check-icon4").classList.remove("hidden");
document.getElementById("checkboxFour").classList.remove("border-gray-200");
document.getElementById("checkboxFour").classList.add("border-blue-700");
// Active
document.getElementById("headingThree").classList.add("text-gray-800");
document.getElementById("headingThree").classList.remove("text-blue-700");
document.getElementById("borderThree").classList.remove("border-blue-700");
document.getElementById("borderThree").classList.add("border-gray-300");
document.getElementById("check-icon3").classList.add("hidden");
document.getElementById("checkboxThree").classList.add("border-gray-200");
document.getElementById("checkboxThree").classList.remove("border-blue-700");
document.getElementById("headingTwo").classList.add("text-gray-800");
document.getElementById("headingTwo").classList.remove("text-blue-700");
document.getElementById("borderTwo").classList.remove("border-blue-700");
document.getElementById("borderTwo").classList.add("border-gray-300");
document.getElementById("check-icon2").classList.add("hidden");
document.getElementById("checkboxTwo").classList.add("border-gray-200");
document.getElementById("checkboxTwo").classList.remove("border-blue-700");
document.getElementById("headingOne").classList.add("text-gray-800");
document.getElementById("headingOne").classList.remove("text-blue-700");
document.getElementById("borderOne").classList.remove("border-blue-700");
document.getElementById("borderOne").classList.add("border-gray-300");
document.getElementById("check-icon1").classList.add("hidden");
document.getElementById("checkboxOne").classList.add("border-gray-200");
document.getElementById("checkboxOne").classList.remove("border-blue-700");
break;
default:
break;
}
};
</script>
Some platforms with premade UI snippets
There are multiple platforms with premade UI snippets ready for developers like us to use. Developers can get code snippets from these platforms and customize them according to their needs. These are some of the best platforms for UI snippets
CodeMyUI
JUSTINMIND
blox
Bootsnip
TUK
My Thoughts
Using UI snippets for the components you are going to use again and again is a no-brainer. Since coding is a tedious task so one should grab any convenience from the outside source with both hands. I personally think that depending too much on these sources wouldn’t be wise but completely neglecting them would make no sense either.
💖 💪 🙅 🚩
Hamza Ahmad
Posted on February 15, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related