JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="wrap">
  <div class="fullimg header">
    <div class="inner">
      <h1>Company</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
  <p>11Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque sequi, consectetur a illo sit nesciunt, perferendis similique natus. Quibusdam itaque iusto error incidunt, facere aliquam porro animi officia voluptate excepturi.</p>
  <p class="fullimg">
    <img src="https://images.unsplash.com/photo-1587502537147-2ba64a62e3d3?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2496&q=80" alt="">
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque sequi, consectetur a illo sit nesciunt, perferendis similique natus. Quibusdam itaque iusto error incidunt, facere aliquam porro animi officia voluptate excepturi.</p>
  <p>
    <img src="https://images.unsplash.com/photo-1587502537147-2ba64a62e3d3?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2496&q=80" alt="">
  </p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque sequi, consectetur a illo sit nesciunt, perferendis similique natus. Quibusdam itaque iusto error incidunt, facere aliquam porro animi officia voluptate excepturi.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque sequi, consectetur a illo sit nesciunt, perferendis similique natus. Quibusdam itaque iusto error incidunt, facere aliquam porro animi officia voluptate excepturi.</p>
</div>

CSS

html, body {
  width: 100%;
}

.wrap {
  width: 500px;
  margin: auto;
}
.wrap p {
  margin-top: 20px;
  margin-bottom: 20px;
}
.inner {
  width: 500px;
  padding: 30px 0 20px;
  margin: auto;
}
.inner h1 {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 24px;
}
.inner p {
  margin-top: 5px;
  font-size: 16px;
}
.fullimg {
  width: 100vw;
  position: relative;
  margin-left: 50%;
  transform: translateX(-50%);
}
img {
  display: block;
  width: 100%;
}