DEV Community: w3hubs.com

Tailwind CSS Smooth Scroll Bottom to top Using JavaScript

w3hubs.com — Fri, 16 Sep 2022 12:49:03 +0000

In this Tailwind CSS Smooth Scroll with a Bottom to top, we used JavaScript and Tailwind CSS helper CSS classes. We have also used font awesome arrow icon with a JavaScript on Click event to execute or functions.

We used a simple JavaScript function and scroll-behaviour property in this smooth scrolling. To make it bottom To top, we used font-awesome icons.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code

CSS Counter

w3hubs.com — Sun, 04 Sep 2022 09:31:40 +0000

CSS counter is mostly used on website loading as a loader. But here we made a CSS counter for knowledge or fun purpose for you. In this counter increment CSS, we used animations and also used after CSS pseudo-element.

You can use this element on your website as a loader and you can change the colour combination and alignment of this CSS counter. Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code

Display Current Time Using HTML,CSS And JavaScript

w3hubs.com — Sat, 27 Aug 2022 18:56:32 +0000

In this Display Current Time, we were Using HTML, CSS And JavaScript. We used the javascript inbuild function for a time, and to display, we used javascript DOM. To show the live time, we used javascript setInterval functions.

For the responsive side, we used CSS media queries. Also, to make it more attractive, we used a background image with an opacity background.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code

Bootstrap Progress Bar Percentage Using Jquery

w3hubs.com — Wed, 03 Aug 2022 13:48:12 +0000

In this bootstrap progress bar, we used jquery with a javascript method. For increment, we used the javascript setTimeout method, and also we used some basic javascript DOM to change value dynamically.

We used bootstrap 4 animated and background progress bar components. Also, we used some background classes for the progress bar with different colours.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source code

Cookies Notifications In Tailwind CSS

w3hubs.com — Sun, 31 Jul 2022 09:09:27 +0000

We used tailwind CSS flex classes and background colour classes in this cookies notification component. Also, we used buttons to allow and refuse cookies buttons.

Here we also used font awesome close icon for close notification components. This is fully responsive for mobile and tablet views.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code

Bootstrap 5 Custom Alert

w3hubs.com — Thu, 28 Jul 2022 14:57:48 +0000

Bootstrap 5 Custom Alert

In this custom alert, we used unique background colours. Also, we modify the bootstrap class CSS properties in this custom bootstrap 5 alerts.

You can use this alert in the admin dashboard or any message you want to show in the notification view. For the mobile view, we change only font size and reset it like a desktop view.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code

On Hover Bottom to center Text Effect Using CSS

w3hubs.com — Sat, 16 Jul 2022 14:27:34 +0000

We made this on Hover Bottom to centre Text Effect Using CSS for fun. In this element, we used css3 properties and HTML.

To make bottom to top, we used hover with CSS transform properties. Also, we hide text that we have to show on hover without hover. For hiding, we used the translateX function and margin-top properties. After that, the hover side used the same CSS function, but we increased the property’s size.

Make it yours now by using it, downloading it, and please share it. We will design more elements for you.

Source Code

Bootstrap 5 Button Loading Example Using Javascript

w3hubs.com — Tue, 05 Jul 2022 16:13:28 +0000

Button loading is mainly used in after button click when the user clicks. So that kind of Loading button is used in commerce sites or payment websites. So here we made a button loading example using bootstrap5 and JavaScript.

In this Button Loading Example, we used bootstrap 5 loader components. To make it clickable, we used JavaScript functions and disabled attributes. You can use this example in any project, like where you want to show some loading animation buttons effects.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code

Vuejs Login and Register Form

w3hubs.com — Mon, 20 Jun 2022 15:15:21 +0000

We made the Login and Register Form in CSS/JS framework and also made it in pain HTML and CSS. But here we made it in the Vuejs framework with the help of HTML/CSS.

In this form, we use plain HTML & CSS and for the responsive side, we used CSS media queries. To make it clickable and functionality we used Vuejs events. This is responsive Login and Register Form for mobile and tablet views.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code

Responsive Navbar In Vue.js

w3hubs.com — Wed, 18 May 2022 15:15:24 +0000

Vuejs is a JavaScript framework and a progressive framework for JavaScript to build single-page web applications. So Here we made Responsive Navbar in the Vue.js framework with the help of HTML/CSS.

In this project, we used Vuejs methods and conditions for rendering functions. To make it responsive, we used CSS Media query. Also, we used font-awesome for toggle purposes on the mobile side, where users can click a navbar display in list format. Here we used vue-router for routing our components with proper names.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code

Modal In HTML/CSS With JavaScript

w3hubs.com — Sun, 24 Apr 2022 08:52:57 +0000

Mainly Modal is used to show some actions or have any offer to show. So here we made this modal using JavaScript with HTML/CSS.

Also Read:- Simple Header Color line In CSS

In this modal, we used JavaScript functions with display properties. Also, we used close functions for Onclick; it will close.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code

Simple Header Color line In CSS

w3hubs.com — Sat, 12 Mar 2022 14:22:22 +0000

Header color is mostly used when you have large data on-page and it will show on the top of the page. So here we made a Simple Header Color line In CSS with HTML.

Also, we used gradient colors on this header in different colors. You can use this with the JavaScript function when your web page is loaded.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code