DEV Community: Hamza Ahmad

Best resources for Tailwind CSS users

Hamza Ahmad — Fri, 25 Mar 2022 16:31:53 +0000

Tailwind CSS has emerged as a great front-end solution in recent times. It has gained a tremendous following due to its utility-first nature and vast CSS classes as it allows devs to build designs right in their HTML markup. There are several UI kit solutions for the framework that enables devs to Fastrack their workflow with expertly designed components and templates. In this blog, we’ll talk about some of the best ready-made Tailwind UI kits out there that allow you to kickstart your project on a high note.

Tailwind UI:

Tailwind UI is the brainchild of the creators of Tailwind CSS and their work stands unparalleled among other UI kits. They have over 400 “beautifully crafted” (as they like to put it) UI components that you can drop right away in your projects. The components can be integrated with JavaScript for interactivity as well as React and Vue. They have three categories of Application UI, Marketing, and Ecommerce components at different prices.

What makes it good?

The kit is developed by the creators of Tailwind CSS and they roll out weekly updates. Their community is very active on all major social and developer platforms. The components are pretty great and they have all the necessary categories of UI components for websites, stores, and apps that you can use in unlimited projects.

Pricing:

As of the most widely known UI kit for Tailwind CSS, their pricing matches the same reputation. All three kits are priced at $149 for lifetime use. Their all-in-one kit is $279 (on a discount atm). They also provide a team license for your team of developers at $799.You can preview their components and find more about them here. https://tailwindui.com/preview.

TUK

Tailwind UI kit has the biggest library of expertly designed components and templates (1000 components and 30 templates) that you can’t find anywhere else. They also have fully responsive, drop-in-ready components that can be integrated with React, Vue, and Angular. They also have three categories of Web Application UI kit, Marketing UI kit, and Ecommerce UI kit. With premium licenses, they also have a community license that gives you free access to 117 of their prime components. They have also recently partnered up with blox which is a VS Code extension that has pre-made UI components.

What makes it good?

Access to 117 free components is a win-win for devs who want to give it a shot before paying for it. They also roll out new components and updates every week. The variety of components is ample for a variety of web dev needs. You can build functional web apps, stores, and websites with great ease. They also have around 30 templates with Angular, Vue, and React integrations that they sell separately. Their access for a lifetime is a major plus as you don’t have to worry about paying after the one-time fee.

Pricing:

TUK offers 250 free components. Their Ecommerce kit (200 components) is quite a bargain for $49. The Web application kit is $149 (around 500 components) and their Marketing kit (200 components) is priced at $79. You can preview their components and find more about them here. https://tailwinduikit.com/

Meraki UI:

Meraki UI is a free Tailwind CSS components library with 58 stylish and fully responsive components. The kit supports RTL languages & is based on Flexbox & CSS Grid. They offer components including popups, cards, buttons, dropdown, forms, navbar, pagination, and much more. The kit is MIT licensed and they have a Github repo where you can see the end results of different projects for yourself.

What makes it good?

They say that there are no free lunches in this world but Meraki UI provides free access to their components. You can just copy-paste the HTML from their website and start building on your projects. They also have amazing resources built using Meraki UI components completely free. Check out their free components and resources here https://merakiui.com/resources

DaisyUI:

DaisyUI is another amazing yet free component library that has expertly designed components for your projects. Their components are customizable and they also provide you free help with themes, colors, layouts, and typography. If you want a quick and simple solution for a project right now, DaisyUI is your go-to.

What makes it good?

They provide free solutions for not only components but also themes, layouts, and typography. Their component classes are clean and require no dependencies so you just copy-paste and you’re good to go. Check it out here: https://daisyui.com/

Tail-Kit:

Tail-kit is another free Tailwind CSS component and templates library that gives you access to over 250 components and templates. The kit is built for Tailwind CSS 2.0 which was a major upgrade in the framework. You install the library and get access to all its components and templates in a jiffy.

What makes it good?

All the components & templates have React, VueJs, and Angular integrations. Some of the components do need to override basic Tailwind configuration before you can use them in your projects but all the necessary configurations are available on their website.

Kitwind (Kometa):

Kitwind describes itself as a marketplace for fully responsive and multipurpose Tailwind CSS UI kits. Although they announced themselves last year as a premium product, their first kit, Kometa, which includes 130 sections of UI components, is available free on their website. Kometa is built on Tailwind CSS 1.4.4 (a slightly older version of the framework). The kit also includes a custom color palette and font family with a couple of spacings & variants. \

What makes it good?

The UI kit does not rely on third-party plugins. They have built their color palette on Material design color palette. Their motto revolves around the concept of more time building & less time coding. The components are diverse and can be used in various projects for personal and commercial use.

Razor UI:

Razor UI is the latest addition to this list and they have stirred up quite some noise in the Tailwind CSS community. Their 100+ components are modern-looking and consistently styled. They also have a UI kit for Laravel Blade called Blade Application UI kit. Razor UI does need some Node.js packages for configurations that are available in the documentation on their website.

What makes it good?

Razor UI’s components are styled consistently which makes your web designs have a similar feel to it. To sum it up, if you’re looking for something simple and beautiful, Razor UI is the way to go.

Pricing:

The Application UI package is priced at $79 for lifetime access and unlimited projects.

What's it like living with developers

Hamza Ahmad — Mon, 21 Mar 2022 15:37:05 +0000

I live in an apartment with 3 front-end developers and none of them have a sane sleep cycle. I often wake up in the middle of the night and see one of them awake and glued to the laptop.

Me: Why are you up?
They: The client needs the update right now

Me: Why are you up?
They: The client changed the design, have to make the UI again from scratch.

Me: Why are you up?
They: This one bug is keeping me awake for the last 3 hours.

I often feel bad for them but they earn much more than I do so that stables things. I spend all day with developers and all I hear is time, time, and TIME.

One of my developer friends worked 20 hours a day for one month straight for a project and before he could rest, he had another one lined up. I see them sleeping in the car on the way to work and even in restaurants while we wait for food. One thing that I have learned after seeing all these events is that time is gold if you are a developer. Developers deserve massive respect for the hard work they put in developing something and I sometimes think that they go unrewarded or people don’t really understand how tough a job it is. Being a non-developer, I can only dream of working so many hours consistently with 10 cups of coffee a day and no sleep at all.

Now I know that developers would love to look for ways or tools that can save their time but one thing I know about devs is that they are really educated and smart people, and don’t compromise on their productivity. Anything that saves their time but messes up with their workflow or productivity will be bashed on by their community. I work at a place where we have multiple products for developers and believe me you guys keep us on our toes all the time. Since we all work in a developer-oriented environment, we focus on developing things that save time. But developers don’t just care about that. They actually don’t care much about saving time or using tools that save time if their productivity is in threat. They’d rather code for one week straight instead of using a tool that claims to do the job in 1 day but ends up messing up their code.

Then maybe developers don’t chase time. Maybe they want to do everything on their own to gain optimal outcomes. This can be true but not entirely.

Developers do like and use tools that do more than just save time. What do they actually need?
Well! One thing I’ve learned is the fact that Devs care about accessibility a lot. They also care about responsiveness and also formatting and so on… Developers won’t give a damn if even one of the discussed things is missing. As I said before, devs are very smart people, they’d rather do it themselves than trust an unreliable source. That’s just how they are which is perfectly fine.

After spending so much time with devs, we came up with a product and tried to cover all bases. Do check it out if you’re interested.

Tailwind CSS over Plain CSS

Hamza Ahmad — Thu, 10 Mar 2022 16:04:44 +0000

I’ve been using Tailwind CSS for the last 7 months now and it is far better than plain CSS. Though some devs complain that it makes the code dirty but there are countless reasons to overlook that. Tailwind CSS basically makes you free of the design systems and create something of your own. Tailwind does have a design system but it is nothing as compared to let’s say Bootstrap. I have listed down some points that in my opinion make Tailwind CSS better than plain CSS.

Inline Styling

Tailwind CSS allows you to define all the styling on the element. This means that if you want to change the styling of a particular element you won’t have to open a separate file to make changes. That way you will avoid unnecessary lookups and save time as well. Doing this will make your code messy and unpleasing but it saves a lot of time and makes the development experience better.

<div role="listitem" class="flex justify-center w-full lg:border-r border-gray-300 py-6">

As you can see the styling of the element is incorporated within that element. Doing that saves unnecessary searching and also you will avoid making a new styling file.

Purging Unnecessary Styles

Tailwind generates a lot of classes and you will certainly not use all of them. The problem with it is that all the classes remain in your app unattended and increase the size of your app. To cope with this problem, Tailwind allows you to purge all the styles that your app doesn’t use. To purge, we need to add a purge property in the Tailwind config and provide the files it needs to look into. For example, the config below will look into all the HTML and JSX to search for used classes:

... purge: [ './src/**/*.html', './src/**/*.jsx', ] ...

Highly Customizable

One of the greatest luxuries of Tailwind CSS is all the customization it allows you to do. Although it comes with a default configuration, it is simple to override it with a tailwind.config.js file. It allows you to customize colors, spacing, size units, themes, etc…
The fact that it is highly customizable makes Tailwind better than plain CSS and easy to use. It is extremely efficient for teams.

No Media queries

Tailwind CSS allows you to make the UI responsive without using media queries. You can make the UI responsive in the class attribute itself. Utility classes can be used across a variety of breakpoints conditionally which helps in building complex responsive layouts hassle-free.
Tailwind by default provides 5 different breakpoints:

sm:640px
md:768px
lg:1024px
Xl:1280px
2xl:1536px

Get rid of naming things

The headache with using CSS is naming the classes. Which classes should be specific? Which classes should be more generic? How do you organize them all and make sure they cascade in the correct order. Tailwind CSS on the other hand provides utility classes and these utility classes are enough to build your design. Naming things only comes into play when you extract a component.

Cache benefits

Using a conventional CSS framework or custom CSS, if you want to make changes to your design you’ll most probably have to make changes to your CSS file. However, when using Tailwind, because you are using exactly the same classes over and over in your markup instead of changing your CSS file, you may not even have to bust your CSS cache to make small changes to your design. This means your users won’t have to redownload your CSS file too often.

Easy to make Components

Despite the fact that Tailwind is a utility CSS framework, making custom components from the combination of those utilities is very simple. The bigger benefit is that there are many UI kits for Tailwind CSS like Tail-Kit, Mamba UI, TUK, Tailblocks, etc…taking away all the pain of building a component from scratch. Recently I stumbled upon something better, a VS Code extension called blox with premade components in it. These kinds of tools are at our disposal courtesy of Tailwind’s ease for developers.

Conclusion

If you are not using Tailwind then surely you are missing out on a lot of good stuff. Tailwind is best for business in my opinion because it’s all about ease and saving time providing extra efficiency.

Launched my first product on Product hunt

Hamza Ahmad — Wed, 23 Feb 2022 09:56:48 +0000

Product Hunt Link: https://www.producthunt.com/posts/blox-5

I have been doing web development for the last 4 years and I have seen a wave of new tools that make development easier and more fun. Though development is a tedious task and consumes a lot of time still there are so many resources that make it simpler or should I say try to make it simpler. Following the same stream, I decided to develop a tool that would save developer’s time and make coding easier. During my time coding I have always used VS Code so I do have this soft corner for it. Naturally I decided to make a tool for VS Code users. After doing some research and many failed tests with my team, blox was born. blox is a VS Code extension that has pre-made UI components in it. Currently blox has more than 1500 UI components and 250 of them are free. We are now planning to launch blox on product hunt to present this tool to a larger audience with very high hopes. We as a team believe that the more exposure this tool gets, the more it will improve.

Useful UI Snippets for Beginners

Hamza Ahmad — Tue, 15 Feb 2022 14:27:22 +0000

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.

I made a website landing page in 2 minutes without any superpowers

Hamza Ahmad — Fri, 11 Feb 2022 15:50:42 +0000

My younger cousin is 12 years old and he wants to be a web developer in the future. While I try to guide him in the right direction by convincing him to change his mind, he asks me a lot of questions. We were discussing how time taking and tiring Web Development is the other day, and I told him that one can even spend months on building a basic website that does very limited tasks. Then he looked up to me and said, “Only if we had SUPERPOWERS”. I chuckled and said, “I wish”.
The other day I was reading an article on the internet that predicted some VS Code extensions that can do well in 2022 and I stumbled upon an extension called blox.
So this VS Code extension had premade drop-in-ready Tailwind CSS Components from multiple UI Kits in it. So next time he was in town, I decided to flex my skills in front of him. I made a simple landing page following 7 simple steps in less than 2 minutes. I chose 7 components to make a basic landing page. These are the components I used.

Hero

I chose to go with an Ecommerce hero component for my landing page. After I dropped the code block, I watched it reflect on a live server.

Featured

After that, I went on to choose a Feature component from the library.

Product Category

Then I thought a Product Category after this would look appropriate, and the live server proved me right.

Blog

I chose this component to tell the users about the latest trends and fashion designs.

Partners

After that, I went on with the Partners component.

Highlight

I thought Highlight would look pretty good at this point.

Footer

Lastly, as all landing pages end, I chose a Footer that complimented the theme well.

As you can see, this is how my landing page turned out. I barely had to write any code, and I could successfully flex on my cousin (his mouth would just not close). He thinks I have superpowers but we all know the secret lol!

Front-End Development in 2022

Hamza Ahmad — Thu, 10 Feb 2022 16:49:15 +0000

Front-End development often doesn’t receive the respect and importance that maybe Back-End Development receives. Back in the day Engineers used to look down on JavaScript but things have changed a lot in the recent times. 2022 is going to be a big year for Front-End Development. Let’s see what frontend is going to be like in 2022.

Rise of Svelte

Svelte is a new tool, in theory it started too late to be able to deal with React, Vue, and Angular. But it is slowly gaining momentum with unprecedented speed.
In 2021, StackOverflow users declared it the most popular framework.
But Svelte is more than that. It is a compiler that creates an advanced front end.
Svelte is not imported into the app like other popular frameworks. Instead, the code written in Svelte is integrated into pure JavaScript. This allows Svelte to win faster compared to bands like React or Vue.

Revival of Static Websites

Data Storage without database? Well! Static websites does that easily . So if you are hiring any of the full stack developers, they do not need a back-end developer to build a standalone website. But the question is why the idea of a static website is coming back as a new Front-end practice? This is because standing websites are cheaper to upgrade, and at the same time, safer, faster, and more powerful.

JAMstack

JAMstack (JavaScript, API, and Markup), a software architecture that works with advanced features to create secure, fast, and scalable web applications. Also, Provides tools to improve workflow, performance and increase productivity for previous developers.

Every day, a lot of developers and businesses use this effective method to build websites and applications. According to a survey, it saw an increase in site performance and improved google SEO by 8 times, which also led to improved ROI.

Artificial Intelligence and Front-End

Artificial Intelligence (AI) continues to amaze us as technology advances, and the front-end business is no different. AI simplifies the most important steps in website and application development: it can manage construction, coding with self-study algorithms, automated testing, and QA functions, leaving more time for engineers to focus on more advanced tasks. I predict many websites and applications built using AI technology in the future.

AI Chatboxes

Talking further about Artificial Intelligence, another thing that will potentially peak in 2022 is AI based chatboxes to improve user experience. With AI technology being able to understand human language it is going to be really smooth. AI based chatbots are really something to look forward for in 2022.

Progressive Web Apps

Recent research shows that most people spend at least 1-3 hours a day using their mobile devices. It is also proven that more than 60% of people use their cell phones instead of using a portable computer or desktop. So if you want to meet the needs of a modern user, you should hire a web development company that can create easy-to-use web applications. To make this task easier, Progressive web applications go through a very advanced development phase during fast loading, there is no need for the internet connection to work properly, and the development of in-depth user information.

My Say

The future is bright for front-end development and it is going to be that way for a while now. Though the trends will change in 2022 most things will stay the same as well. Conventional Front-End Development isn’t going to be hurt by the advancements in Technology. Me and my team has also contributed in making front-end development better. Check out our extension and let me know how is it. Stay happy and keep developing.

My extension got 3000 installs out of nowhere in one night and I don't have a clue

Hamza Ahmad — Thu, 10 Feb 2022 15:35:47 +0000

Hello everyone. I made a VS Code extension for front-end developers 3 months ago and listed it on Marketplace with very high hopes. Though I self-marketed the extension in various ways, the start was kind of slow and steady. I got around 1500 installs in the first 3 months. Yesterday night I slept after checking the marketplace since its the part of my routine now and everything was normal. I woke up the next day getting ready for the office, checked the marketplace again, and was shocked to see the install count reached up to 4500. Both happy and confused me didn't have a clue about what had just happened. I don't know if that's common or what. So I thought I'd tell you guys and get your responses.

Link to my extension

Why is VS Code so hard to beat?

Hamza Ahmad — Tue, 08 Feb 2022 16:25:42 +0000

As the famous saying goes: “There is nothing more opinionated than a developer”. Well I made that up but we all are aware how hard it is to convince a developer. Nothing really changes when it comes to Code Editors. Some devs prefer Sublime and Vim but others like to use Atom. Among all these names there is one that really stands out and beats all others with a fair margin. I am talking about VS Code. VS Code has made a mark very quickly and is considered one of the most durable code editors today. But why is it so hard to beat? Let’s discuss in detail what makes VS Code so special and why.

Hey, it’s free and cross-platform man

VS Code is free, open-source, and cross-platform IDE. It will work on all devices whether it is Windows, macOS, and Linux which makes it easier for everyone to work regardless of the device they are working on.

Very easy to install

It’s extremely easy to install. All you have to do is just download it and you are ready to code your first web app using, say, Express and JavaScript etc…

Supports a lot of languages

Another thing that makes VS Code so special is the fact that it has support for almost all the programming languages that exist. It supports Python, JavaScript, HTML, CSS, TypeScript, C++, Java, PHP, Go, C#, PHP, SQL, Ruby, Objective-C, and much more.

Debugging

VS Code comes out with a built-in debugger which is also one of its key features. It helps to speed up any editing, merging, and debugging. However, it automatically comes with a debugger that supports NodeJS that can modify anything transpired to JavaScript but also, you can use extensions for other runtimes.

Extensions

VS Code has thousands of extensions on offer from themes like UI extension to programming language support, debugging, Git integration, and even Spotify players!
You can easily create your own with the help of specific JavaScript / TypeScript and detailed scripts.
Extensions are very important because they make the VS Code what it is right now, a piece of software that you know very well.
Without them, VS Code would be no more than a magnificent text editor with beautiful design and basic automation complete here and there.
Extensions are really important in customizing your software to suit your personal needs.

Conclusion

Most people do agree that it is the best IDE right now and the stack overflow surveys say the same. Its ease of use and countless amazing features make it great. I and my team have also tried to make the developer experience smoother by making a VS Code extension for front-end developers that have Premade UI components. Do check out if interested.

Wrap up 2021 with these VS Code extensions

Hamza Ahmad — Fri, 31 Dec 2021 11:08:03 +0000

Visual Studio Code is arguably the most popular IDE at the moment for quite a while now. 2021 was no different for this successful code editor. The wide range of different features that VS Code allows us to use is what makes it special. One of the things that stands out about VS Code is the massive number of extensions it provides you. Today we will have a look at some of the distinct VS Code Extensions that every developer should install by the end of this year.

Visual Studio IntelliCode

This extension is based on Artificial Intelligence and it recommends code completion automatically. It also gives various development features based on Artificial Intelligence.

Marketplace Link

Peacock

This extension adds various colors to different windows of VS Code. While working on the front-end and back-end at the same time, you can add different colors to identify which repo you are working on. It also helps you add colors in live share and remote integration.

Marketplace Link

Regex Previewer

Regular expressions are often confusing to understand. Regex Previewer gives you a separate document similar to your regex.
The extension provides many examples of comparisons, so it is much easier to quickly and accurately regex the various use cases.

Marketplace Link

blox

blox is another incredibly useful extension with a mammoth 1500+ drop-in-ready UI snippets. All you have to do is just drag and drop the pre-made code snippets in your project and save a great amount of time writing code.

Marketplace Link

Bookmarks

Bookmark your code at a certain line with this extension so that you can refer to it later. Add the bookmark with the command “ctrl+alt+k” and it is also the same command for toggling the bookmark. “ctrl+alt+l” is the command for jumping to the next bookmark and “ctrl+alt+j” is the command for jumping to the previous bookmark.

Marketplace Link

Quokka.js

This extension speeds up development by displaying runtime values in the editor as you code, so you can focus on writing code instead of building custom configs.

Marketplace Link

Profile Switcher

Profile Switcher helps you create various profiles on VS code that you can use for different reasons. This is a must-have extension for those who use VS code for more than one reason. You can save specific extensions for each profile as well.

Marketplace Link

SonarLint

Sonarlint is an outstanding extension for lone workers without a team. Basically, it detects code quality and code security issues, and generates reports for the user. Sonarlint can also be used by teams with sonarCube and sonarCloud. It has built-in rules in it but a developer can also mute rules or add new rules.

Marketplace Link

If you are going in 2022 without these extensions then you should definitely check out these extensions for better productivity.

Useful UI Snippets for the most common use cases

Hamza Ahmad — Wed, 29 Dec 2021 16:30:19 +0000

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

<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

<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

<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

<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

<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

 <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

CodeMyUI
JUSTINMIND
blox
Bootsnip
TUK

My Thoughts

Low Code Approach To Design Highly Effective UIs

Hamza Ahmad — Fri, 17 Dec 2021 13:56:32 +0000

What is low code?

Low code is an approach used for software development that requires almost no coding. It includes building interfaces/UIs using simple drag and drop and then doing minor customization to finalize everything. Low code approach helps people with no extensive coding knowledge to build different multipurpose applications. The logic is simple and the UI is accurate; appropriately, it offers the opportunity to customize many parts with code, but the idea is that most work can be done without wasting time writing custom code.

These are the things you should keep in mind for designing high effective UIs using a low code approach.

Suitable platforms

In order to fit your requirements, you should always do your research and look for suitable platforms to get the components, and see what suits you best. For example, if you need your UI to be React supportive, you should head to a platform that has pre-made components that support react. Some popular platforms include:

OutSystems
Contains powerful tools, templates, connectors all in a single platform, and helps you create any kind of application very easily.

Envato elements
Provides you with a comprehensive library of UI Kits to create websites and mobile interfaces. And contains ready to use graphic, web, and video assets.

TUK
Provides you with 250+ free and 1500+ paid UI components to seamlessly create mobile and web interfaces. All the components are fully responsive and drop-in ready to save you a ton of time.

justinmind
Contains plenty of interactive UI components to design hi-fi prototypes and wireframes of your project.

And if you want to avoid the hassle of shifting tabs to copy the code of one component after the other, you can do that with the blox extension on VS Code that allows you to access various UI Kits and components without leaving VS Code.

Right Colors

One thing that stands out in your UI design is the color scheme you are using. Users tend to avoid web applications or sites with bad color schemes. While you are depending on drag and drop for building the UI. You should be mindful of what are the requirements and have clarity while approaching the design.

Consistent Designs

Having a consistent design is extremely important for an effective UI Design. It increases learnability. A beautiful UI design comes from creating a sense of familiarity and ensuring that everything on the screen makes sense and works in ways that the user expects it to work. UI designers achieve this by using component usage, functional architecture information, and a structured look and feel of product marketing throughout. Structuring your component in a consistent manner is the key.

Using the Right Language

To help users navigate easily in the social networks we create, we need to make sure everything is written in ways that help them move freely and confidently from one object to another.

Consistency is key here. “Add” and “Create,” for example, may seem to change. But if your device constantly uses "add", users may fail to understand the action required when using "create." As a UI designer, you can take the lead in developing the language and vocabulary you want to use in every product. Just make sure you stick to your decisions and stick to the rules you and your team choose to label things with the same function.

Conclusion

While the Less Code approach helps a great deal, one should have a basic knowledge of this art in order to achieve great results. Totally depending on an outside source may cause serious damage. The only way to approach low code for designing high effective UIs is the wise way.