JSFiddle - React, Tailwind, and code Playground

by Amir Danish

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Great Shoes inc.</title>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css" />
</head>

<body>

  <header class="hero">
    <div class="container spacing">
      <h1 class="primary-title">Amazing shoes at an amazing price</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam perspiciatis facilis beatae laudantium
        quidem enim sit sequi!</p>
      <a href="#" class="btn">See what we have</a>
    </div>
  </header>

  <main>

    <section class="featured">
      <div class="container">
        <h2 class="section-title">Featured products</h2>
        <div class="split">
          <a href="#" class="featured__item">
            <img src="https://pngriver.com/wp-content/uploads/2018/02/nsparent-images-transparent-backgrounds-PNGRIVER-COM-Denim-Jean-Canvas-Shoes-2017-Fashion-Casual-Shoes-Men-Blue-Walking-Shoes-Trainers-Footwear-zapatillas-deportivas.png" alt="" class="featured__img">
            <p class="featured__details"><span class="price">$99</span>shoe name</p>
          </a>
          <a href="#" class="featured__item">
            <img src="E:/Web Dev 2020/bmw/shoes-master/img/shoe-1.png" alt="" class="featured__img">
            <p class="featured__details"><span class="price">$99</span>shoe name</p>
          </a>
          <a href="#" class="featured__item">
            <img src="img/shoe-6.png" alt="" class="featured__img">
            <p class="featured__details"><span class="price">$99</span>shoe name</p>
          </a>
        </div>
      </div>
    </section>


    <section class="our-products">
      <div class="container">
        <h2 class="section-title">Our products</h2>

        <article class="product...

SCSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
p {
  margin: 0;
}

section {
  padding: 7em 0;
}

.container {
  width: 85%;
  max-width: 65em;
  margin: 0 auto;
}

.split {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  justify-content: center;

  &>* {
    flex-basis: 30%;
    min-width: 15em;
  }
}

.spacing>*+* {
  margin-top: var(--spacer, 2rem)
}

.btn {
  display: inline-block;
  text-decoration: none;
  color: var(--clr-text, #fff);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.125rem;
  padding: .5em 1.25em;
  background: var(--clr-accent, blue);
  border-radius: .25em;
  transition:
    transform 250ms ease-in-out,
    opacity 250ms linear;
}

.btn:hover,
.btn:focus {
  transform: scale(1.1);
  opacity: .9;
}

.primary-title {
  font-size: 4rem;
  font-size: clamp(3rem, calc(5vw + 1rem), 4.5rem);
  line-height: 1;
  text-transform: uppercase;
}

.section-title {
  text-align: center;
  font-size: clamp(2.5rem, calc(5vw + 1rem), 4rem);
  line-height: 1;
  color: #17353d;
  margin-bottom: 5rem;
}

.hero {
  color: white;
  text-align: center;
  padding: 15em 0;
  background: #222;

  @supports (background-blend-mode: multiply) {
    background: url(../img/shoe-3.png),
      radial-gradient(#444, #111);
    background-blend-mode: multiply;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
  }
}

.featured {
  background: #eee;

  &__item {
    display: block;
    position: relative;
    transform: scale(.85);
    transition: transform 250ms ease-in-out;
    text-decoration: none;
    color: #333;
    text-align: center;
    line-height: 1.2;



    &:hover,
    &:focus {
      transform: scale(1);

      .featured__details {
        opacity: 1;
        text-shadow: 0 0 2em rgba(#fff, 1)
      }
    }

    &::after {
      content:...