JSFiddle - React, Tailwind, and code Playground

by AkshayHinge

HTML

<!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">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" media="screen and (max-width:900px)" href="../css/newstyle.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <script src="../javascript/javascript.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap" rel="stylesheet">
    <title>Sarvadnya Fitness Club</title>

</head>

<body>

    <header>

        <nav id="navbar">
            <div id="logo" class="navclass">
                <img src="https://static.vecteezy.com/system/resources/previews/010/504/453/non_2x/muscle-man-silhouette-gym-icon-illustration-free-vector.jpg" alt="">
                <p>Sarvadnya Fitness</p>
            </div>
            <div id="nav" class="navclass">
                <ul>
                    <li><a href="#home" class="iteam"> Home</i></a></li>
                    <li><a href="#about" class="iteam">About</a></li>
                    <li><a href="#plans">Plans</a></li>
                    <li><a href="#services" class="iteam">Services</a></li>
                    <li><a href="#contact" class="iteam">Contact</a></li>
                </ul>
            </div>
            <div id="contact-top">
                <button class="iteam">Call: +917620484913</button>


            </div>

        </nav>

    </header>
    
    <section id="home">
        <div id="home-sec">
            <div id="background">
            </div>
            <h6>Start your journey</h6>
            <p>With Sarvadnya Fitness Club and Gym.</p>
            <a href="#contact" id="a-hover">known more and Start today</a>
  ...

CSS

body{
    margin: 0px;
    padding: 0pc;
}
/* navbar */

#navbar{
    position: fixed;
    display: flex;
    align-items: center;
    background-color: white;
    height: 70px;
    width: 100%;
    z-index: 100;
    justify-content: space-between;  
    box-shadow: 0px 0px 6px black;
}

/* logo styling */
#logo{
    
    text-align: center;
    height: 57px;
    margin: 0px 22px;
    text-align: center;
}
#logo:hover{
    cursor: pointer;
}
#logo img{
    height: 41px;
    margin: 0px;
    padding: 0px;
}
#logo p{
    margin: 0px;
    padding: 0px 5px;
    font-size: 11px;
}

/* nav items styling */
#nav ul{
   display: flex;
   align-items: center;
   padding: 0;
  
}
#nav ul li {
     text-decoration: none;
        
     list-style: none;
     margin: 0px;
    }

#nav ul li a{
    color: rgb(0, 0, 0);
    font-family: "Raleway", sans-serif;  
    width: 100%;
    height: 100%;
    padding: 25px 15px;
    text-decoration: none;
    font-size: 1.2rem;
}

#contact-top{
    width: 16%;
    margin: 0px 16px;
    height: 85%;
    padding: 0px;
    color: rgb(0, 0, 0);
}
#contact-top button{
    font-family: "Raleway", sans-serif;
    width: 95%;
    height: 100%;
    font-size: 15px;
    border-radius: 7px;
    /* padding: 0px; */
    text-decoration: none;
    border: 1px solid darkgrey;
    background-color: white;
}
#contact-top button:hover{
    cursor: pointer;
    background-color: red;
}
#nav ul li a:hover{
    background-color: #ccc; 
    /* text-decoration: underline; */
}
#nav ul li a:active{
    background-color: #ccc; 

}
hr{
    margin: 20px;
}
/* home section */
#home-sec{
    background-image: url(https://images.pexels.com/photos/5327503/pexels-photo-5327503.jpeg?auto=compress&cs=tinysrgb&w=400);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
     flex-direction:column ;
    color: white;
   ...