JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="router-grid">

  <!-- Motorway and link go together in same cell	 -->
  <div class="router-grid-item">

    <div class="road-group-inputs">
      <label>Motorway</label>
      <input type="text" value="100">
      <input type="text" value="1">
    </div>
    <div class="road-group-inputs">
      <label>Motorway-link</label>
      <input type="text" value="100">
      <input type="text" value="1">
    </div>

  </div>

  <!-- Trunk and link go together in same cell	 -->
  <div class="router-grid-item">

    <div class="road-group-inputs">
      <label>Trunk</label>
      <input type="text" value="100">
      <input type="text" value="1">
    </div>
    <div class="road-group-inputs">
      <label>Trunk-link</label>
      <input type="text" value="100">
      <input type="text" value="1">
    </div>

  </div>

  <!-- Primary and link go together in same cell	 -->
  <div class="router-grid-item">

    <div class="road-group-inputs">
      <label>Primary</label>
      <input type="text" value="100">
      <input type="text" value="1">
    </div>
    <div class="road-group-inputs">
      <label>Primary-link</label>
      <input type="text" value="100">
      <input type="text" value="1">
    </div>

  </div>

  <!-- Secondary and link go together in same cell	 -->
  <div class="router-grid-item">

    <div class="road-group-inputs">
      <label>Secondary</label>
      <input type="text" value="100">
      <input type="text" value="1">
    </div>
    <div class="road-group-inputs">
      <label>Secondary-link</label>
      <input type="text" value="100">
      <input type="text" value="1">
    </div>

  </div>

  <!-- Tertiary and link go together in same cell	 -->
  <div class="router-grid-item">

    <div class="road-group-inputs">
      <label>Tertiary</label>
      <input type="text" value="100">
      <input type="text" value="1">
    </div>
    <div class="road-group-inputs">
      <label>Tertiary-link</label>
      <input type="text" value="100">
  ...

SCSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
	
	&:before, &:after {
		box-sizing: border-box;
	}
}

$brand-dark: #0E0727;
$brand-dark-medium: #221C3A;
$brand-light: #A59FB8;


body {
	background: $brand-dark;
}
.router-grid {
	display: grid;
	width: 100%;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 60px;
	padding: 30px;
	
	&-item {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 30px;
	}
	
	.road-group-inputs {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
		
		label {
			flex-grow: 1;
			width: 100%;
			font-size: 14px;
			font-weight: 700;
			display: block;
			margin-bottom: 4px;
			color: $brand-light;
		}
		
		input {
			width: 45%;
			height: 44px;
			text-align: center;
			border: none;
			background: $brand-dark-medium;
			border-radius: 6px;
			color: $brand-light;
			font-size: 18px;
			font-weight: 700;
			
			&:focus {
				outline: none;
			}
			
			&.inverted-input {
				color: $brand-dark;
				background: $brand-light;
				width: 100%;
			}
		}
	}
}

.divider {
	width: calc(100% - 60px);
	height: 2px;
	border-radius: 2px;
	background: $brand-light;
	opacity: 0.5;
	margin: 0 auto 30px;
}