JSFiddle - React, Tailwind, and code Playground

by peteryates

HTML

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="section1">
					<div class="part1">
						<div class="bignumber">
							1
						</div>
					</div>
					<div class="part2">
						Icons
					</div>
				</div>
				<div class="section2">
					<header>
						<h2>Heading</h2>
					</header>
					<div class="part3">
						Neque nisi sagittis accumsan mattis parturient. Lacus, diam
						cras nam eget leo nisi eget duis purus. Nibh enim risus
						conubia nonummy aptent porttitor vestibulum rhoncus enim.
						Senectus pretium consectetuer sapien augue conubia diam,
						non.
					</div>

					<footer>
						Footer
					</footer>
				</div>
				<div class="part4">
					<ul>
						<li>
							Lectus lorem elementum orci mus natoque volutpat mauris.
						</li>
						<li>
							Nascetur, risus.
						</li>
					</ul>
				</div>
			</div>

			<div class="row">
				<div class="section1">
					<div class="part1">
						<div class="bignumber">
							2
						</div>
					</div>
					<div class="part2">
						Icons
					</div>
				</div>
				<div class="section2">
					<header>
						<h2>Heading</h2>
					</header>
					<div class="part3">
						Dictum pharetra luctus adipiscing ipsum eros sem
						rhoncus eni, vestibulum. Est consectetuer etiam elit.
						Dictum dictum. Eget amet. Est. Placerat venenatis
						praesent nibh cubilia ad, dui.
					</div>
					<footer>
						Footer
					</footer>
				</div>
				<div class="part4">
					<ul>
						<li>
							Rhoncus consectetuer.
						</li>
						<li>
							Neque felis semper.
						</li>
					</ul>
				</div>
			</div>

			<div class="row">
				<div class="section1">
					<div class="part1">
						<div class="bignumber">
						3
						</div>
					</div>
					<div class="part2">
						Icons
					</div>
				</div>
				<div class="section2">
					<header>
						<h2>Heading</h2>
					</header>
					<div...

SCSS

body {
  margin: 1rem 10%;
}

.container {
  background-color: white;
  display: grid;
  grid-gap: 2rem;

  .row {
    background-color: lightblue;
    border: 2px solid grey;

    display: grid;
    grid-template-rows: subgrid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 3fr 1fr;

    .section1 {
      display: flex;
      flex-direction: column;

      .part1 {
        display: flex;
        flex: 1;
        padding: 1rem;
        background-color: red;
        justify-content: center;
        font-size: 5rem;
      }
    }


    .part2 {
      flex: 1;
      padding: 1rem;
      background-color: orange;
      justify-content: center;
    }

    .section2 {
      display: flex;
      flex-direction: column;

      header {
        flex: 1;
        padding-left: 16px;
        background-color: turquoise;
      }

      .part3 {
        padding: 1rem;
        background-color: pink;
      }

      footer {
        flex: 1;
        padding: 12px 16px;
        background-color: darkorange;

      }
    }


    .part4 {
      background-color: lightgreen;
      word-wrap: anywhere;

      &>ul {
        list-style: none;
        padding: 16px;
        margin: 0;
      }
    }
  }
}



@media (max-width: 600px) {
  body {
    margin: 0;

    .row {
      grid-template-rows: auto 1fr auto;
      grid-template-columns: auto;

      .section1 {
        display: flex;
        flex-direction: row;

        .part1 {
          font-size: 3rem;
        }
      }
    }
  }
}