Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it nowIntall Later
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it nowHello reader, I am cbolson. Nice to meet you again in this free code sharing website. In this post I am going to explain about Tailwind mega menu. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.
These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.
If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.
This is the source code of the code. You can copy and paste the code to your editor.
xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<body class="bg-gradient-to-t from-purple-300 to-purple-100 flex flex-col gap-12 items-center justify-center min-h-screen p-4
before:[&:has(#radio-1:checked)_#toggle-1]:scale-100
before:[&:has(#radio-2:checked)_#toggle-2]:scale-100
before:[&:has(#radio-3:checked)_#toggle-3]:scale-100
before:[&:has(#radio-4:checked)_#toggle-4]:scale-100
before:[&:has(#radio-5:checked)_#toggle-5]:scale-100
before:[&:has(#radio-6:checked)_#toggle-6]:scale-100
before:[&:has(#radio-7:checked)_#toggle-7]:scale-100
">
<div class="bg-white/50 backdrop-blur-md ring ring-black/5 p-8 w-full max-w-5xl rounded-xl shadow-2xl shadow-purple-300 ">
<nav class="flex flex-wrap gap-0 text-sm
*:py-2
*:px-4
*:relative
*:isolate
*:cursor-pointer
*:whitespace-nowrap
before:*:absolute
before:*:w-full
before:*:h-1
before:*:left-0
before:*:bottom-0
before:*:bg-purple-400
before:*:rounded-full
before:*:transition-all
before:*:duration-500
before:*:ease-[cubic-bezier(.47,1.64,.38,.87)]
before:*:scale-0
before:*:origin-left
hover:before:*:scale-100
">
<label id="toggle-1" for="radio-1">Furniture</label>
<label id="toggle-2" for="radio-2">Lighting</label>
xxxxxxxxxx
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
xxxxxxxxxx
console.log("Event Fired")
And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.
Leave a Comment
You need to login first to comment.