JSFiddle - React, Tailwind, and code Playground

by Posandu Mapa

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>My Material design Web Page</title>
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width">
    <!-- ONLY CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link href="https://res.cloudinary.com/tronic247/raw/upload/v1620900079/material.min.css" rel="stylesheet" />
  </head>

  <body>
    <div class="container">
      <label class="textfield outlined">
        <input placeholder>
        <span>Textfield</span>
      </label>

      <label class="textfield filled">
        <input placeholder>
        <span>Textfield</span>
      </label>

      <label class="checkbox">
        <input type="checkbox" />
        <span>Checkbox</span>
      </label>

      <label class="radio">
        <input type="radio" name="demo-radio" />
        <span>Radio button</span>
      </label>
      <label class="radio">
        <input type="radio" name="demo-radio" />
        <span>Radio button</span>
      </label>

      <label class="switch">
        <input placeholder=" " type="checkbox" />
        <span>Toggle</span>
      </label>

      <div class="row">
        <div class="col m-4">
          <div class="card collapse">
            <div class="ripple-e">
              <img src="https://www.tronic247.com/material/demo.webp" alt="">
              <div class="content">
                <h2>Drone</h2>
                <h3>Image from unsplash</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                </p>
              </div>
            </div>
            <div class="footer">
              <a class="btn text" href="https://unsplash.com/photos/XYrjl3j7smo" rel="nofollow" target="_blank">See more</a>
              <a href="#!" class="btn icon float-right"><span class="material-icons">favorite</span></a>
            </div>
          </div>
        </div>
        <div class="col m-4">
          <div...