JSFiddle - React, Tailwind, and code Playground

by havisk

HTML

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Intro: 
  I've given you some sample JSON data below, and displayed it using JQuery.   
  Challenge: 
  Create a beautiful search results page that displays each result clearly.  Feel free to use the platform of your choosing.  You can even remove JQuery.  I'm looking for a beautiful UI, clean, module code, testability, and commented code.  I expect you to use technologies that work in
  IE11, Safari, and mobile browsers.   Good Luck! 
 -->
 
 <script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
  
  <div id="root">
    Render will go here
  </div>

CSS

.App {
  text-align: center;
}
.app{
  background-color: aliceblue;

}
.iten{
  padding: 10px;
}
.space{
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;
}
button.search{
  margin-top: 30px;
}
.art {
  width: 75%;
  height:auto;
  border: 1px solid black;
  padding: 16px;
  margin-top: 16px;
  background-color: white;

}
.navbar{
  margin-bottom: 16px;
}

.cost{
  color: red;
}

.cost span{
  font-weight: bold;
}

.link{
  font-size: .8em;
}

Babel + JSX

const FlightSeg = (props) => {
      return(
        <div className="main">
           <p className="space">{props.dTime} - {props.aTime}</p>
           <ul className="list-unstyled">
             <li>{props.dAirport} to {props.aAirport}</li>
             <li>
               {props.dName} to {props.aName}
             </li>
             <li>{props.airName} {props.fNumber}</li>
             <li>{props.booking}</li>
           </ul>
       </div>
      );
};



const Iten = (props) => {
  return(
    <div className="row">
      <div className="iten">
        <ul className="list-inline">
          <li className="col-md-3">{props.dTime} - {props.aTime}</li>
          <li className="col-md-3">{props.tTime}</li>
          <li className="col-md-3">{props.stops} stops</li>
          <li className="col-md-3 pull-right cost">
            {props.avail} left at <span>{props.curr}{props.cost}</span>
          </li>
        </ul>
        <ul className="list-inline ">
          <li className="col-md-3">{props.name}</li>
          <li className="col-md-3">{props.dAbv}-{props.aAbv}</li>
          <li className="col-md-3"> </li>
        </ul>
      </div>
      <button type="button" className="btn-danger">Select</button>
    </div>

  );
};



class App extends React.Component {

    state = {
      itens: [],
      showSegs: false
  };



// Grabs the JSON data from the server
  componentDidMount() {
        axios.get('https://api.myjson.com/bins/1gb9tf')
          .then(response => {
            this.setState({itens: response.data.results});
          });
  }

  // toggles flight details
  toggleSegsHandler = (id, e) => {
    const doesShow = this.state.showSegs;
    this.setState({showSegs: !doesShow})
  };

  render() {


    const itens = this.state.itens.map(iten => {
      let segs = iten.segments.map((seg, index) => {
        // console.log(seg);

        return (
          <FlightSeg
            key = {index}
            dCity = {seg.departure.city}
            aCity =...