JSFiddle - React, Tailwind, and code Playground

by Musale Martin

HTML

<script src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<body>
  <div class="banner mdl-color--primary"></div>
  <div id="main-grid" class="mdl-grid">
    <div class="mdl-card mdl-shadow--6dp">
      <div class="mdl-card__title">
        <div class="mdl-grid">
          <div class="mdl-cell mdl-cell--8-col border2 radio-cell">
            <div class="radio-group">
              <label>1</label>
              <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect radio-label-wrapper" for="item3v1">
            <input id="item3v1" type="radio" name="item3" value="1" class="mdl-radio__button radio-group-item"/>
          </label>
            </div>
            <div class="radio-group">
              <label>2</label>
              <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect radio-label-wrapper" for="item3v2">
          <input id="item3v2" type="radio" name="item3" value="2" class="mdl-radio__button"/>
          </label>
            </div>
            <div class="radio-group">
              <label>3</label>
              <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect radio-label-wrapper" for="item3v3">
                
          <input id="item3v3" type="radio" name="item3" value="2" class="mdl-radio__button"/>
          </label>
            </div>
            <div class="radio-group">
              <label>4</label>
              <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect radio-label-wrapper" for="item3v4">
          <input id="item3v4" type="radio" name="item3" value="2" class="mdl-radio__button"/>
          </label>
            </div>
            <div class="radio-group">
              <label>5</label>
              <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect radio-label-wrapper" for="item3v5">
          <input id="item3v5"...

CSS

body {
    margin: 0px;
    min-height: 900px;
    background-color: #ede7f6;
  }
  
  .mdl-grid#main-grid {
    max-width: 648px;
    display: block;
    margin-top: -100px;
  }
  
  .mdl-card {
    width: 100%;
    display: block;
    padding-bottom: 34px;
  }
  
  .banner {
    height: 260px;
  }
  
  .mdl-card__title {
    display: block;
  }
  
  .mdl-radio__ripple-container {
    border: 1px solid green;
  }
  
  .radio-group {
    display: inline-block;
    text-align: center;
    border: 1px solid red;
  }
  
  .radio-group label {
    display: block;
  }

.radio-group input {
    display: block;
    width: fit-content;
 }
  
  .radio-label-wrapper {
    border: 1px solid blue;
    height: 30px;
    width: 50px;
  }