JSFiddle - React, Tailwind, and code Playground

by ratus

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>store</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>

  <body>
    <div class="fone35">
      <img src="imges/Sound Store-39.png" alt="lom" align="top" />
      <img src="imges/Sound Store-38.png" alt="lom" align="top" />
      <img src="imges/Sound Store-37.png" alt="lom" align="top" />
      <img src="imges/Sound Store-36.png" alt="lom" align="top" />
      <img src="imges/Sound Store-35.png" alt="lom" align="top" />
    </div>
    <div class="conteiner">
      <div class="fone65">
        <img src="imges/Sound Store-59.png" alt="lom" />
        <img src="imges/Sound Store-61.png" alt="lom" />
        <img src="imges/Sound Store-63.png" alt="lom" />
        <img src="imges/Sound Store-65.png" alt="lom" />
      </div>
      <div class="fone75">
        <img src="imges/Sound Store-75.png" alt="lom" />
      </div>
    </div>
  </body>

</html>

CSS

body {
  background: #0a122d;
  margin: 0;
  width: 1000px;
}

.warpper {
  position: relative;
}

.fone35 {
  position: absolute;
  float: right;
  width: 500px;
  display: block;
  padding: 2px;
  margin-bottom: 200px;
  margin-left: 1500px;
  margin-right: 20px;
  margin-top: 300px;
}

.fone65 {
  display: block;
  width: 300px;
  padding: -2px;
  margin-bottom: 200px;
  margin-left: 300px;
  margin-right: 200px;
  margin-top: 300px;
}

.fone75 {
  display: inline;
  margin-bottom: 25%;
  margin-left: 25%;
  margin-right: 25%;
  margin-top: 25%;
}

.conteiner {
  position: absolute;
  margin-bottom: 300px;
  margin-left: 400px;
  margin-right: 400px;
  margin-top: 0;
}