JSFiddle - React, Tailwind, and code Playground

by silkpuma

HTML

<body style="background-color: #e5e5e5">
  <div class="container-fluid" style="background-color: #e5e5e5">

    <div class="row">
        <div style="height: 100vh; margin: 0 -15px 0 -15px; background-image: url('assets/bg.jpg');"   class="bg-image">
        <nav class="navbar navbar-expand-sm navbar-light bg-light " >
      <div class="container-fluid" style="background-color: transparent !important;">
        <a class="navbar-brand" href="#">iRepair</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div style="background-color: transparent !important;" class="collapse navbar-collapse " id="navbarSupportedContent" >
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="#repair">Repair</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#purchase">Purchase</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#aboutUs">About Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#location">Location</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="tel:+15404215581">(540)421-5581</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
      <div style="background-color: transparent !important; padding-top: 24px" class="text-center position-absolute top-50 start-50 translate-middle" >
      <h1>iRepair</h1>
      <h5 style="margin-bottom: 24px">Harrisonburg's original professional Phone & PC Repair Shop.</h5>
      <a...

CSS

div{
  font-family: "Avant Garde Gothic", monospace;
}




.img-size{
  width: 230px; /* You can set the dimensions to whatever you want */
  height: 230px;
  object-fit: contain;
}

div{
  background-color: #e5e5e5;
}

div:before{
  background-color: #e5e5e5;

}

margin{
  background-color: #e5e5e5;
}


.img-product-details{
  width: 180px; /* You can set the dimensions to whatever you want */
  height: 180px;
  object-fit: cover;
}

.card-formatting{
  /*margin: 8px;*/
  align-items: center
}

.invisible-buttons{

}

.annoying-imgs{
  width: 180px; /* You can set the dimensions to whatever you want */
  height: 180px;
  object-fit: contain;
}

.card{
  border: transparent;
}


.card-img-repairs{
  width: 200px; /* You can set the dimensions to whatever you want */
  height: 200px;
  object-fit: contain;
}

.card-formatting-devices{
  /*margin: 16px 8px;*/
  align-items: center

}

.card-formatting-repairs{
  /*margin: 16px 8px;*/
  align-items: center;
  /*text-align: center;*/
}

.repair-info-div{
  align-items: center;
}