JSFiddle - React, Tailwind, and code Playground

by Yaroslav Samardak

HTML

<div class='script2'>
	<span data-prefix='instead'>finish-ticket</span>
	<span data-prefix='where'>
		<span class='clause'>
			<span>filial</span>
			<span>Registan Tumani IIB</span>
		</span>
		<span class='clause'>
			<span>operator</span>
			<span>Max</span>
		</span>
	</span>
	<span data-prefix='to'>
		<span class='clause'>
			<span>task</span>
			<span>Change SIM-Card</span>
		</span>
	</span>
	<span data-prefix='with delay'>5s</span>
</div>
	
<div class='script'>
  <span class='code'>instead 
    <span class='value'>finish-ticket</span>
  </span>

  <span class='code'>where 
    <span class='clause'>
      <span class='left'>filial</span>
      <span class='right'>registan iib</span>
    </span>
  </span>
  
  <span class='code'>and
    <span class='clause'>
      <span class='left'>operator</span>
      <span class='right'>max</span>
    </span>
  </span>
  
  <span class='code'>and
    <span class='clause'>
      <span class='left'>task</span>
      <span class='right'>personal => plan</span>
    </span>
  </span>
  
  <span class='code'>do
    <span class='value'>redirect-ticket</span>
  </span>
  
  <span class='code'>to
    <span class='clause'>
      <span class='left empty'>task</span>
    </span>
  </span>
	
	<span class='code'>with delay
    <span class='clause'>
      <span class='left empty'>5s</span>
    </span>
  </span>
</div>

<div class='script'>
  <span class='code'>after 
    <span class='value'>finish-ticket</span>
  </span>

  <span class='code'>where 
    <span class='clause'>
      <span class='left'>filial</span>
      <span class='right'>registan iib</span>
    </span>
  </span>
  
  <span class='code'>do
    <span class='value'>become-ready</span>
  </span>
</div>

SCSS

body {
	font-family: 'Fira Code';
  padding: 8px;
  margin: 0;
}

body {
  background: #39353e;
}

.script {
  /* background: rgba(1, 1, 1, 0.8); */
  padding: 8px;
  margin-bottom: 8px;
  text-transform: uppercase;
  font-size: smaller;
	border-radius: 2px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.script .code {
  color: darkorange;
  display: block;
  margin: 2px;
}

.script .code .value {
  color: #fff;
}

.script .code .clause .left {
  color: violet;
}

.script .code .clause .left::after {
  content: "=";
  color: #fff;
  margin-left: 0.5em;
}

.script .code .clause .left.empty::after {
  content: "";
}

.script .code .clause .right {
  color: lightblue;
}


.script2 {
	flex-direction: row;
	background: rgba(1, 1, 1, 0.8);
  padding: 8px;
  margin-bottom: 8px;
  font-size: smaller;
	border-radius: 2px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	color: #FFF;
	display: flex;
	flex-wrap: wrap;

	span {
		display: inline-flex;
		flex-wrap: wrap;
		margin-right: 0.5em;
	}

	> span {
		&:before {
			color: darkorange;
			text-transform: uppercase;
			content: attr(data-prefix);
			margin-right: 0.5em;
		}
	}

	.clause {
		> span:first-child {
			text-transform: uppercase;
			color: violet;
			
			&:after {
				color: darkorange;
				content: 'IS';
			}
		}
		
		> span:last-child {
			color: lightblue;
			
			&:before, &:after {
				content: '"';
			}
		}
	}
}