JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Resume-</title>
  </head>

  <body>
    <div class="RGN  skn-slo7 document fontsize fontface vmargins hmargins pagesize" style="transform: scale(1.44118); transform-origin: 0px 0px;">
      <div id="CONTAINER_PARENT_0" class="top-section">
        <div id="CONTAINER_0" class="top-left-box">
          <div id="SECTION_NAME05aca355-96f6-4f57-919d-408bdaf9266c" class="section notdraggable name-sec firstsection">
            <div id="PARAGRAPH_05aca355-96f6-4f57-919d-408bdaf9266c_1_52d3cd29-4066-4891-b6d8-47c07adbd1be" class="paragraph firstparagraph">
              <div class="name">
                <span id="05aca355-96f6-4f57-919d-408bdaf9266cFNAM1">Ranganadh</span>
                <span id="05aca355-96f6-4f57-919d-408bdaf9266cLNAM1">Paramkusam</span>
              </div>
              <div class="resume-title txt-caps"><span id="05aca355-96f6-4f57-919d-408bdaf9266cRTTL1">Full-Stack Developer</span></div>
            </div>

          </div>
        </div>
      </div>
      <div id="CONTAINER_PARENT_1">
        <div id="CONTAINER_1">
          <div id="SECTION_CNTC5ee979cf-6ec2-400f-9570-3cf084cd2284" class="section cntc-sec">
            <div id="PARAGRAPH_5ee979cf-6ec2-400f-9570-3cf084cd2284_1_838dd1e4-940a-4352-b044-5976642145a1" class="paragraph firstparagraph">
              <div class="address">
                <div class="addr-details">
                  <span class="svg-icon">
                    <svg width="18px" height="18px" viewBox="0 0 18 18" fill="none">
                      <circle cx="9" cy="9" r="9" fill="white" fill-opacity="0.7"></circle>
                      <path d="M5.37293 6.26408L6.4069 5.23107C6.47983 5.15781 6.56652 5.09968 6.66199 5.06003C6.75746 5.02038 6.85982 4.99998 6.9632 5C7.17387 5 7.37193 5.08252 7.52047 5.23107L8.63307 6.34369C8.70633 6.41663 8.76446 6.50332 8.80411 6.59879C8.84376 6.69426 8.86416...

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800');

.skn-slo7 * {
  margin: 0;
  padding: 0;
  text-align: left;
  font-feature-settings: "liga"0;
  -moz-font-feature-settings: "liga"off
}

/*START content disc style for LI*/
.skn-slo7 ul {
  list-style: none;
  padding: 0
}

.skn-slo7 ul li {
  position: relative;
  margin: 0 0 4px 0
}

.skn-slo7 ul li:before,
.skn-slo7 .lang-sec .paragraph li span:first-child:before {
  content: '\2022';
  position: absolute;
  top: 0;
  font-size: 16px;
  color: #050505;
  font-family: "Roboto";
  font-weight: 400
}

.skn-slo7 ul li:last-child {
  margin: 0
}

/*END content disc style for LI*/

/*Helping classes*/
.skn-slo7 .paddedline,
.skn-slo7 .disp-block {
  display: block;
  clear: both
}

.skn-slo7 .txt-caps {
  text-transform: uppercase
}

.skn-slo7 .txt-capt {
  text-transform: capitalize
}

.skn-slo7 .txt-bold {
  font-weight: 700
}

.skn-slo7 .op-6 {
  opacity: 0.6
}

.skn-slo7 .wd-50 {
  width: 50%;
  display: inline-block;
  width: calc(50% - 12px);
  vertical-align: top
}

.skn-slo7 .wd-50:nth-child(2n) {
  padding-left: 10px
}

.skn-slo7 .wd-50:nth-child(2n+1) {
  padding-right: 10px
}

.skn-slo7 .tpbtm-space {
  margin-top: 2px
}

.skn-slo7 .pdr-5 {
  padding-right: 5px
}

.skn-slo7 .pdb-5 {
  padding-bottom: 5px
}

.skn-slo7 .pdt-1 {
  padding-top: 1px
}

.skn-slo7 .mrl-4 {
  margin-left: 4px
}

.skn-slo7 .mrr-4 {
  margin-right: 4px
}

.skn-slo7 .ratt-fld {
  padding-top: 1px;
  padding-bottom: 1px
}

.skn-slo7 div:empty,
.skn-slo7 span:empty,
.skn-slo7 ul li:empty,
.skn-slo7 .lang-sec .paragraph li:before {
  display: none
}

/*Header Section*/
.skn-slo7 .name {
  word-wrap: break-word;
  font-weight: 700;
  text-transform: capitalize;
  font-family: "Poppins"
}

.skn-slo7 .resume-title {
  word-wrap: break-word;
  font-family:...