JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="c2.css">
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <meta charset="utf-8">
    <title>Iphone</title>
  </head>

  <body>
    <!--meny_start-->
    <div class="box_for_box">
      <div class="box_meny">
        <div class='flt'>
          <img src="meny1.png" class="img_flt_meny">
          <a href='#'>Выбрать себе Apple Watch</a>
        </div>
        <div class='flt'>
          <img src="meny2.png" class="img_flt_meny">
          <a href='#'>Выбрать себе Apple Watch</a>
        </div>
        <div class='flt'>
          <img src="meny3.png" class="img_flt_meny">
          <a href='#'>Выбрать себе Apple Watch</a>
        </div>
        <div class='flt'>
          <img src="meny4.png" class="img_flt_meny">
          <a href='#'>Выбрать себе Apple Watch</a>
        </div>
        <div class='flt'>
          <img src="meny5.png" class="img_flt_meny">
          <a href='#'>Выбрать себе Apple Watch</a>
        </div>
        <div class='flt'>
          <img src="meny6.png" class="img_flt_meny">
          <a href='#'>Выбрать себе Apple Watch</a>
        </div>
      </div>
    </div>
    <br>
    <!--meny_end-->

CSS

html {
  overflow-x: hidden;
}

body {
  margin: 0px;
}

.box_for_box {
  min-width: 20%;
  width: 100%;
  height: 850px;
}

.box_meny {
  min-width: 20%;
  background: white;
  width: 70%;
  margin: 0 auto;
  text-align: center;
}

.flt {
  width: 31%;
  min-width: 250px;
  display: inline-block;
  margin: 30px 1% 20px 1%;
  background: lightgrey;
}

.img_flt_meny {
  display: block;
  height: 230px;
  width: 60%;
  min-width: 230px;
  margin: 20px auto;
}

.flt a {
  line-height: 45px;
  display: block;
  width: 80%;
  min-width: 170px;
  height: 45px;
  text-align: center;
  border: 1px solid black;
  margin: 20px auto;
  background: yellow;
  text-decoration: none;
}
/*meny_end*/