JSFiddle - React, Tailwind, and code Playground

by JP Obley

HTML

<h1>
  Super Mario
</h1>
<div class='details'>
  <div class='row'>
    <div class='left-col'>Base</div>  
    <div class='right-col'>ANN</div>  
  </div>

  <div class='row'>
    <div class='left-col'>Mission</div>  
    <div class='right-col'>Mapping</div>  
  </div>
</div>

CSS

.row {
  padding: 5px 0px;
}
.left-col {
  display: inline-block;
text-transform: uppercase;
width: 100px;
}

.right-col {
  display: inline-block
}

Babel + JSX

function ColRow = ({label, value}) => ({
	<div className='row'>
  	<div className='left-col'>{label}</div>
    <div className='right-col'>{value}</div>
  </div>
})



render() {
	return (
  <h1></h1>
  {map(robotObj, (value, key) => ({
    <ColRow label={key} value={value}/>
  }))}
}