How i created animated Hero Section using Tailwind css | CodeF

Fazail Alam
3 min readJan 11, 2022

Showing how to use tailwind keyframes

Hello! In this article i am going to show you how i created this animated hero section using custom key frames in tailwind css.

First i added a parent div with classes

<div class="w-full md:w-1/2 flex justify-center items-center transform scale-75 md:scale-125 translate-x-20 md:translate-x-40 translate-y-0 md:-translate-y-20"></div>

and then added a img element in the center with classes

<img class="w-80 h-80 rounded-full border-4 border-white custom-shadow" src="./your-img-path.jpg" alt="">// /app.css//.custom-shadow{//     box-shadow:0 0 15px rgba(0,0,0,0.5)//}

Note: i added custom-shadow class because i wanted the offset of shadow to be (0,0), after that i added the inner circle div with classes

<div class="hw-inner flex justify-between items-center absolute border border-gray-800 rounded-full animate-spin-slow anim-8s">    <div class="bg-white p-1 rounded-full custom-shadow h-10 w-10  transform -translate-x-5 ">        <img class="h-9 w-9 object-center animate-rotate-img anim-8s" src="./assets/alpine.png" alt="">    </div>    <div class="bg-white overflow-hidden rounded-full custom-shadow h-10 w-10 transform translate-x-5 ">         <img class="h-10 w-10 object-center animate-rotate-img anim-8s" src="./assets/javascript.png" alt="">    </div></div>

here anim-spin-slow, animate-rotate-img are keyframes for animating the div and img elements, and anim-8s,hw-inner are custom classes for height and width. Inside of inner circle div i added two divs, and then inside those two div a child img element in each, now our inner circle div is ready, after that i added another div inside the parent div which will be our outer circle div with classes

<div class="hw-outer flex justify-between items-center absolute border border-gray-800 rounded-full animate-spin-slow "></div>

like from above class here is also a custom class hw-outer for height and width, then i added two divs which are justify-between so that both div are opposite to each other

//First Div
<div class="flex justify-between items-center h-full w-full">
<div class="bg-white p-1 rounded-full custom-shadow h-10 w-10 transform translate-x-8 translate-y-40 "> <img class="h-full w-full object-center animate-rotate-img " src="./assets/flutter.png" alt=""> </div> <div class="bg-white overflow-hidden p-1 rounded-full custom-shadow h-10 w-10 transform -translate-x-8 -translate-y-40 "> <img class="h-full w-full object-center animate-rotate-img" src="./assets/svelte.png" alt=""> </div></div>//Second Div
<div class="absolute flex justify-between items-center h-full w-full">
<div class="bg-white p-1 rounded-full custom-shadow h-10 w-10 transform translate-x-8 -translate-y-40"> <img class="h-full w-full object-center animate-rotate-img " src="./assets/tailwindcss.png" alt=""> </div> <div class="bg-white overflow-hidden p-1 rounded-full custom-shadow h-10 w-10 transform -translate-x-8 translate-y-40 "> <img class="h-full w-full object-center animate-rotate-img " src="./assets/vuejs.png" alt=""> </div></div>

Note: Second div is absolute, Now open tailwind.config.js file and go to where it says extend, add two keys keyframes and animation.

keyframes: {'spin-slow': {'0%': { transform: 'rotate(0deg)' },'100%': { transform: 'rotate(360deg)' },},'rotate-img': {'0%': { transform: 'rotate(0deg)' },'25%': { transform: 'rotate(-90deg)' },'50%': { transform: 'rotate(-180deg)' },'75%': { transform: 'rotate(-270deg)' },'100%': { transform: 'rotate(-360deg)' },}},animation: {'spin-slow': 'spin-slow 13s linear infinite','rotate-img': 'rotate-img 13s linear infinite',}

keyframes and animation are self explanatory where you will define your keyframes and name of the keyframe respectively.

I hope this was helpful to you.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Fazail Alam
Fazail Alam

Written by Fazail Alam

I'm just a regular dev who wants know how tech are build.

No responses yet

Write a response