JSFiddle - React, Tailwind, and code Playground

by Mac1ovin

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Pufiki</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div class="slider padding-site">
            <div class="header">
                <a class="logo" href="index.html"><img src="pic/logo.png" alt="logo"></a>
                <ul class="menu">
                    <li><a class="active-link" href="#">HOME</a></li>
                    <li><a href="#">PRODUCTS</a></li>
                    <li><a href="#">HISTORY</a></li>
                    <li><a href="#">SHOWROOM</a></li>
                    <li><a href="#">CONTACT</a></li>
                </ul>
            
            </div>
            <div class="slider-text">
                <h4>TRENDING</h4>
                <h2>Fishnet Chair</h2>
                <p>Seat and back with upholstery made of cold cure foam. Steel frame, available in matt powder-coated black</p>
                <a href="#">Order Us&nbsp;&gt;</a>
            </div>
            <div class="box-circle">
                <a href="#" class="circle"></a>
                <a href="#" class="circle circle-active"></a>
                <a href="#" class="circle"></a>
            </div>
        </div>
        <div class="padding-site">
            <div class="link-product">
                <div class="link-product-left">
                    <a class="active-product-link" href="#">Featured</a>
                    <a href="#">New</a>
                </div>
                <a class="explore" href="#">explore all &gt;</a>
            </div>
            <div class="product">
                <div class="item">
                    <img src="pic/product5.jpg" alt="product" width="270">
                    <div class="product-hover"><a...

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700');
* {
    margin: 0;
    padding: 0;
}

.body @import {
    font-family: 'montserrat', sans-serif;
}

.container {
    max-width: 1366px;
    margin: 0 auto;
    min-width: 400px;
	min-height: 100%;
}

.slider {
    height: 800px;
    background-image: url('pic/slider-img.jpg');
    position: relative;
}

.padding-site {
    padding-left: 98px;
    padding-right: 98px;
}

.header {
    display: flex;
    justify-content: space-between;
}

.logo {
    margin-top: 63px;
}

.menu {
    display: flex;
    list-style-type: none;
    margin-top: 57px;
}

.menu a {
    padding: 10px 13px;
    display: block;
    font-family: Montserrat;
    color: #8c8c8c;
    font-size: 14px;
    font-weight: 300;
    text-align: right;
    text-decoration: none;
}

.menu a:hover {
    color: #212121;
}

.menu .active-link {
    color: #212121;
    font-size: 14px;
    font-weight: 700;
    text-align: right;
    border-bottom: 3px solid #212121;
}

.slider-text {
    margin-top: 283px;
}

.slider-text h4 {
    color: #43a047;
    font-size: 18px;
    font-weight: 700;
    line-height: 48px;
    text-align: left;
}

.slider-text h2 {
    color: #212121;
    font-size: 62px;
    font-weight: 100;
    line-height: 72px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: -3px;
}

.slider-text a {
    display: inline-block;
    border-radius: 22.5px;
    padding: 10px 31px;
    background-color: #ffffff;
    box-shadow: 0px 2px 4.85px 0.15px rgba(33, 33, 33, 0.35);
    color: #212121;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.slider-text a:hover {
    background-color: #f9f9f9;
}

.slider-text a:active {
    box-shadow: 0px 0px 4.85px 0.15px rgba(33, 33, 33, 0.35);
    position: relative;
    top: 2px;
}

.slider-text p {
    color: #6c6c6c;
    font-size: 14px;
    font-weight:...