Useful UI Snippets for the most common use cases
Hamza Ahmad
Posted on December 29, 2021
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 input control, buttons are probably the most important element for your UI designs. Used for putting information on the websites, 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="flex items-center justify-between w-full">
<div class="flex flex-col lg:flex-row w-full items-start lg:items-center rounded bg-white shadow">
<div class="w-full lg:w-2/3 h-64 dark:bg-gray-800"></div>
<div class="w-full lg:w-1/3 h-24 dark:border-gray-700 lg:h-64 border-t lg:border-t-0 lg:border-r lg:border-l lg:rounded-r dark:bg-gray-700 bg-gray-100"></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 December 29, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
privacy Caught in the Crunch My Journey from Snacks to 2 Million Exposed Users Privacy
November 30, 2024
devchallenge Submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse
November 30, 2024