JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div id='frame1' class='frame1'>
  <div id='heroimage' class='heroimage'>
  </div>
  <div id='serviceitem2' class='serviceitem2'>
    <div id='rectangle5' class='rectangle5'>
    </div>
    <div class='lorem.'>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
  <div id='serviceitem3' class='serviceitem3'>
    <div id='rectangle6' class='rectangle6'>
    </div>
    <div class='lorem.'>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
  <div id='serviceitem1' class='serviceitem1'>
    <div id='rectangle4' class='rectangle4'>
    </div>
    <div class='lorem.'>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    <div id='group2' class='group2'>
      <div id='rectangle7' class='rectangle7'>
      </div>
      <button id='linkbutton' class='linkbutton'>
        Link Button</button>
    </div>
  </div>
  <div id='group4' class='group4'>
    <div id='menu-background' class='menu-background'>
    </div>
    <div id='group3' class='group3'>
      <div id='logo' class='logo'>
      </div>
      <div id='menu-items' class='menu-items'>
        <div id='home' class='home'>
          Home</div>
        <div id='about' class='about'>
          About</div>
        <div id='services' class='services'>
          Services</div>
        <div id='contact' class='contact'>
          Contact</div>
      </div>
    </div>
  </div>
</div>

CSS

* {margin: 0; box-sizing: border-box;}

.heroimage {
  background-color: #d9d9d9;
  height: 393px;
  width: 1200px;
  position: relative;
	margin: 50px auto;
}

.serviceitem2 {
  width: 367px;
  height: 269px;
  top: 599px;
  left: 777px;
  position: absolute;
}

.rectangle5 {
  background-color: #d9d9d9;
  height: 150px;
  width: 367px;
  top: 599px;
  left: 777px;
  position: absolute;
}

.loremipsumissimplydummytextoftheprintingandtypesettingindustry.loremipsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknownprintertookagalleyoftypeandscrambledittomakeatypespecimenbook.
 {
  color: #000000;
  text-align: left;
  vertical-align: text-top;
  font-size: 12px;
  font-family: Inter;
  left: 777px;
  top: 787px;
  width: 367px;
  height: 81px;
  position: absolute;
  line-height: auto;
  border-style: hidden;
  outline: none;
}

.serviceitem3 {
  width: 367px;
  height: 269px;
  top: 599px;
  left: 1194px;
  position: absolute;
}

.rectangle6 {
  background-color: #d9d9d9;
  height: 150px;
  width: 367px;
  top: 599px;
  left: 1194px;
  position: absolute;
}

.loremipsumissimplydummytextoftheprintingandtypesettingindustry.loremipsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknownprintertookagalleyoftypeandscrambledittomakeatypespecimenbook.2
 {
  color: #000000;
  text-align: left;
  vertical-align: text-top;
  font-size: 12px;
  font-family: Inter;
  left: 1194px;
  top: 787px;
  width: 367px;
  height: 81px;
  position: absolute;
  line-height: auto;
  border-style: hidden;
  outline: none;
}

.serviceitem1 {
  width: 367px;
  height: 336px;
  top: 599px;
  left: 360px;
  position: absolute;
}

.rectangle4 {
  background-color: #d9d9d9;
  height: 150px;
  width: 367px;
  top: 599px;
  left: 360px;
  position: absolute;
}

.loremipsumissimplydummytextoftheprintingandtypesettingindustry.loremipsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknownprintertookagalleyoftypeandscrambledittomakeatypespecimenbook.3
...