Elegant Social Media Icon Design with Fluid Animations in TailwindCSS

Elegant Social Media Icon Design with Fluid Animations in TailwindCSS Project by SudhuCodes Made with TailwindCSS Language

Project Creator

@SudhuCodes — A project contributor on SudhuCodes platform.

Category

TailwindCSS — This project belongs to the tailwindcss category.

Upload Date

7/9/2025 — Uploaded to the SudhuCodes project library.

Project Description

Download free project assets built using tailwindcss. This open-source project is part of the SudhuCodes initiative to support developers and learners.

1<!DOCTYPE html>
2<!-- ------Code with SudhuCodes------ -->
3<html lang="en">
4
5<head>
6    <meta charset="UTF-8">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>SudhuCodes - Elegant Social Media Icon Design with Fluid Animations in TailwindCSS</title>
9    <script src="https://cdn.tailwindcss.com"></script>
10    <script src="https://kit.fontawesome.com/c58add7555.js" crossorigin="anonymous"></script>
11</head>
12
13<body class="flex items-center justify-center min-h-screen bg-[#16151f]">
14
15    <div class="flex gap-3 group">
16
17        <div
18            class="bg-[#4444ff11] hover:border-[#60ddff83] border border-[#6360ff83] rounded overflow-hidden -rotate-[20deg] translate-x-20 group-hover:rotate-0 group-hover:translate-x-0 transition duration-500 relative">
19            <div
20                class="h-20 w-20 absolute -z-10 bg-[#ff2c2c] blur-2xl top-0 left-0 group-hover:top-10 group-hover:left-20 transition-all duration-500">
21            </div>
22            <a href="#" class="flex flex-col items-center">
23                <i class="fa-brands fa-linkedin px-20 text-3xl py-16 text-slate-300"></i>
24                <div class="p-2 text-slate-200 bg-[#ffffff16] w-full text-center">
25                    <p class="text-sm font-semibold">Linkedin</p>
26                </div>
27            </a>
28        </div>
29
30        <div
31            class="bg-[#4444ff11] border hover:border-[#60ddff83] border-[#6360ff83] rounded overflow-hidden -translate-y-10 group-hover:translate-y-0 transition duration-500 relative">
32            <div
33                class="h-20 w-20 absolute -z-10 bg-[#03fddbb1] blur-2xl left-4 bottom-8 group-hover:left-24 group-hover:bottom-28 transition-all duration-500">
34            </div>
35            <a href="#" class="flex flex-col items-center">
36                <i class="fa-brands fa-github px-20 text-3xl py-16 text-slate-300"></i>
37                <div class="p-2 text-slate-200 bg-[#ffffff16] w-full text-center">
38                    <p class="text-sm font-semibold">Github</p>
39                </div>
40            </a>
41        </div>
42
43        <div
44            class="bg-[#4444ff11] border hover:border-[#60ddff83] border-[#6360ff83] rounded overflow-hidden rotate-[20deg] -translate-x-20 group-hover:rotate-0 group-hover:translate-x-0 transition duration-500 relative">
45            <div
46                class="h-20 w-20 absolute -z-10 bg-[#ffae2c] blur-2xl top-0 right-0 group-hover:top-28 group-hover:right-20 transition-all duration-500">
47            </div>
48            <a href="#" class="flex flex-col items-center">
49                <i class="fa-brands fa-twitter px-20 text-3xl py-16 text-slate-300"></i>
50                <div class="p-2 text-slate-200 bg-[#ffffff16] w-full text-center">
51                    <p class="text-sm font-semibold">Twitter</p>
52                </div>
53            </a>
54        </div>
55
56    </div>
57
58</body>
59
60</html>

Live Preview

You're free to use this code for your personal or educational projects. If you use it publicly, consider giving credit to @SudhuCodes.

Want more beginner-friendly and open-source projects like this one? Browse the full library on the SudhuCodes homepage.

Have suggestions or improvements? Contact us or contribute on GitHub.