JSFiddle - React, Tailwind, and code Playground
by mrjordy
HTML
<style>
/* ------------------------------- */
/* GLOBAL */
/* ------------------------------- */
table.ms-core-tableNoSpace.ms-webpart-root {
min-width: 1200px;
}
/* ------------------------------- */
/* EXPANDABLE LINKS */
/* ------------------------------- */
.ExpandableLinkSections {
width: 100%;
display: inline-block;
vertical-align: top;
}
.seatsLeft {
height: 270px;
width: calc(100% - 40px);
display: block;
/* display: inline-block; */
vertical-align: top;
/* position: absolute; */
color: white;
}
.Pane {
width: 132px;
height: calc(100% - 4px);
cursor: pointer;
margin: 2px;
transition: .3s;
overflow: hidden;
display: inline-block;
background-size: 100%;
position: relative;
}
.PaneInner {
height: calc(85%);
box-shadow: inset 0 0 30px #444;
}
.Section1>.PaneInner {
border-radius: 10px 0px 0px 10px;
}
.Section4>.PaneInner {
border-radius: 0px 10px 10px 0px;
}
.Pane:not(.SectionOpen):hover .PaneInner {
box-shadow: inset 0 0 30px #fff;
}
.Pane.SectionOpen.narrow {
width: calc(100% - 439px);
}
.Section1 .PaneInner {
background:
/* top, transparent red, faked with gradient */
linear-gradient(rgba(109, 29, 29, 1),
rgba(109, 29, 29, 1));
background-size: 100% auto;
background-position: 65%;
/* overflow-y: visible; */
}
.Section2 .PaneInner {
background:
/* top, transparent red, faked with gradient */
linear-gradient(rgba(35, 60, 173, 1),
rgba(35, 60, 173, 1));
background-size: 100% auto;
background-position: 65%;
}
.Section3 .PaneInner {
background:
/* top, transparent red, faked with gradient */
linear-gradient(rgba(102, 133, 32, 1),
rgba(102, 133, 32, 1));
background-size: 100% auto;
background-position: 65%;
}
.Section4 .PaneInner {
background:
/* top, transparent red, faked...