JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<section style='display:flex'>
  <div class='patt pattern1'></div>
  <div class='inside-rails rail-clockwise'>
    <div class='inside-rails-h'></div>
    <div class='inside-rails-v rail-v-clockwise'></div>
  </div>
  <div class='patt pattern2'>
    <div class='inside-rails rail-counter-clockwise'>
      <div class='inside-rails-h'></div>
      <div class='inside-rails-v rail-v-counter-clockwise'></div>
    </div>
  </div>
  <div class='patt pattern3'></div>
	<div class='patt pattern4'></div>
</section>

CSS

div {
    margin: 10px;
    width: 200px;
    height: 200px;
}
.patt {
	float: left;
	position: relative;
}
.clear {
	clear: both;
}
.pattern1{
    /*background-image: repeating-linear-gradient(36deg, rgba(255,255,255, 0.1), rgba(255,255,255, 0.1) 1px, transparent 0px, transparent 2px);*/
		background-image: repeating-linear-gradient(42deg, rgba(255,255,255, 0.1), rgba(255,255,255, 0.1) 1px, transparent 0px, transparent 2px);
		background-color: #67686b;
}

.pattern2{
    /*background-image: repeating-linear-gradient(36deg, rgba(255,255,255, 0.1), rgba(255,255,255, 0.1) 1px, transparent 0px, transparent 2px);*/
		background-image: repeating-linear-gradient(42deg, rgba(255,255,255, 0.1), rgba(255,255,255, 0.1) 1px, transparent 0px, transparent 2px);
		background-color: #b9a068;
}

.pattern3 {
    /*background-image: repeating-linear-gradient(-45deg, rgba(255,255,255, 0.1), rgba(255,255,255, 0.1) 1px, transparent 1px, transparent 6px);*/
		
		background-image: repeating-linear-gradient(-45deg, rgba(255,255,255, 0.1), rgba(255,255,255, 0.1) 1px, transparent 1px, transparent 6px);
    background-size: 4px 4px;
		background-color: #009d13;
		
		/*background-image: repeating-linear-gradient(42deg, rgba(255,255,255, 0.1), rgba(255,255,255, 0.1) 1px, transparent 0px, transparent 2px);
		background-color: #009d13;*/
}

.inside-rails {
	position: absolute;
	width: 200px;
	height: 15px;
}

.rail-clockwise {
	top: 188px;
  left: -2px;
}
.rail-counter-clockwise {
	top: -12px;
  left: -20px;
}
.rail-v-clockwise {
	top: 0px;
}
.rail-v-counter-clockwise {
	top: -10px;
}

.inside-rails-h {
	width: 100%;
	height: 2px;
	background-color: #fff;
	position: absolute;
}
.inside-rails-v {
	width: 100%;
	height: 10px;
  background: repeating-linear-gradient(to right, white, white 2px, transparent 2px, transparent 50px);
	position: absolute;
}

.pattern4 {
	background-image: repeating-linear-gradient(-45deg, rgba(255,255,255, 0.1), rgba(255,255,255, 0.1) 1px, transparent 1px, transparent...