JSFiddle - React, Tailwind, and code Playground

by akmiecik

HTML

<div class="the_weeks_grid"><span class="week_row"><div class="week_intro">
 	<div class="week_col">46</div>
 	<div class="start_day">11/13</div>
 	<div class="total_col">22.0</div></div>  
 <div class="sun miles"><span class="at" style="display: none;">&nbsp;&nbsp;@
	    <span class="average"></span></span>
 		<span class="in_out hide"></span>
 </div>
 <div class="mon miles rollers_slow">22.0<span class="at">&nbsp;&nbsp;@
		<span class="average">21.8</span></span> 
 		<span class="in_out hide">1</span>
 </div>
 <div class="tue miles"><span class="at" style="display: none;">&nbsp;&nbsp;@
		<span class="average"></span></span> 
 		<span class="in_out hide"></span>
 </div>
 <div class="wed miles"><span class="at" style="display: none;">&nbsp;&nbsp;@
		<span class="average"></span></span> 
 		<span class="in_out hide"></span>
 </div>
 <div class="thur miles"><span class="at" style="display: none;">&nbsp;&nbsp;@
		<span class="average"></span></span> 
 		<span class="in_out hide"></span>
 </div>
 <div class="fris miles"><span class="at" style="display: none;">&nbsp;&nbsp;@
		<span class="average"></span></span> 
 		<span class="in_out hide"></span>
 </div>
 <div class="sat miles"><span class="at" style="display: none;">&nbsp;&nbsp;@
		<span class="average"></span></span> 
 		<span class="in_out hide"></span>
 </div></span><span class="week_row"><div class="week_intro">
 	<div class="week_col">45</div>
 	<div class="start_day">11/06</div>
 	<div class="total_col">118.0</div></div>  
 <div class="sun miles slower">19.0<span class="at">&nbsp;&nbsp;@
	    <span class="average">16.7</span></span>
 		<span class="in_out hide">0</span>
 </div>
 <div class="mon miles slower">19.0<span class="at">&nbsp;&nbsp;@
		<span class="average">16.6</span></span> 
 		<span class="in_out hide">0</span>
 </div>
 <div class="tue miles"><span class="at" style="display: none;">&nbsp;&nbsp;@
		<span class="average"></span></span> 
 		<span class="in_out hide"></span>
 </div>
 <div class="wed...

CSS

body, h1, .entry-title a, .entry-content h1, h2, .entry-content h2, h3, .entry-content h3, h4, .entry-content h4, h5, .entry-content h5, h6, .entry-content h6 {
    color: #101072;
}
hr {
    background-color: #ccc;
    border: 0;
    height: 2px;
    /* margin-bottom: 1.5em; */
    position: relative;
    bottom: 11px;
}
hr#hr_two {
    bottom: 65px;
}
article {
    background: #fefefe;
    border-radius: 30px;
    padding: 0 0 150px 0 !important;
}
.hide {display: none;}
div#almanac {
    position: relative;
    top: 9px;
    font-size: 24px;
    width: 100% !important;
    text-align: center;
}
span#first_radios {
    position: absolute;
    top: 80px;
    width: 100% !IMPORTANT;
    text-align: center;
}
input[type="radio"] {
    margin-left: 6px;
    margin-right: 8px;
}
textarea#notes {
    position: absolute;
    top: 120px;
    width: 90%;
    left: 5%;
    border-radius: 20px;
    font-size: 18px;
    padding: 0 10px;
}
div#split_button {
    position: relative;
    bottom: 111px;
    left: 20px;
}
div#split_section {
    display: none;
    position: relative;
    bottom: 111px;
    padding: 5px 15px;
}
div#swim_data {
    visibility: hidden;
    position: absolute;
    width: 100%;
    z-index: 0;
}
#bike_color {
    position: absolute;
    top: 200px;
    width: 343px;
    text-align: center;
}
#hours, #minutes, #seconds, #average, #max, #temp, #direction, #wind_dir, #wind_speed, #wind_gust {
    font-size: 20px !important;
    border-radius: 10px;
    background: #ffffff;
}
div#top_part {
    position: relative;
    bottom: 134px;
}
#row_1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0px;
    padding: 0 15px 0 20px;
    z-index: 1;
    position: relative;
    bottom: 20px;
}
   
    #row_1 label {
        grid-area: 1 / 1 / 4 / 3;
    }
    input#date_today {
        width: 175px;
        height: 51px;
    }   
    div#distance_box {
        grid-area: 1 / 2 /...

JavaScript

$(document).ready(function () {
$('.at span:empty').parent().hide()
 
});