JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<div class="grid-container">
  <div class="grid-item item1"> 
     item1
  </div>
  <div class="grid-item"> 
     item2
  </div>
  <div class="grid-item"> 
     item3
  </div>
  <div class="grid-item"> 
     item4
  </div>
  <div class="grid-item"> 
     item5
  </div>
  <div class="grid-item"> 
     item6
  </div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}

.grid-item {
  background-color: coral;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

JavaScript

/* function discount(discount) {
  return (price) => {
    return price * discount;
  }
}

const tenPercent = discount(0.1);
alert(tenPercent(500)); */

/* function dis(dis) {
  return (price) => {
    return dis * price;
  }
}

const tenPer = dis(0.1);
alert(tenPer(1000));


function dis(dis) {
  return (price) => {
    return dis * price;
  }
}

const tenper = dis(0.2);
alert(tenper(1000)); */


import { React } from 'react';
import { ReactDOM } from 'react-dom';



const Info = (props) => {
	<div>
  	<h1>Info</h1>
    <p>This is : {props.info}</p>
  </div>
};

const withAdminMessage = (WrappedComponent) => {
return (props) => {
	<div>
  	<p>MESSAGE FROM ADMIN : PLEASE DON'T SHARE!!!</P>
    <WrappedComponent {...props} />
  </div>
  }
}

const requireAuthentication = (WrappedComponent) => {
	return (props) => {
	<div>
  	{props.isAunthicated ? <WrappedComponent {...props} : <p>Not Authenticated</p> />}
  </div>
  }
}

const AuthInfo = requireAuthentication(info)

const AdminInfo = withAdminMessage(Info);


ReactDOM.render(<AuthInfo isAunthicated={true} info="Hello" />, document.getElementById('app'));

ReactDOM.render(<Info info="Hello" />, document.getElementById('app'));