JSFiddle - React, Tailwind, and code Playground

by Vikram Deshmukh

HTML

<div class="card-container">
  <div class="card card-white-on-blue">
    <div class="content">
      <h3>Days left</h3>
      <div>1</div>
      <p>Google AR Workshop at Student Union tomorrow.</p>
      <button>Register</button>
    </div>
  </div>
  <div class="card blue-on-white">
    <div class="content">
      <h3>Canvas User Satisfaction</h3>
      <div>99%</div>
      <p>Percentage of satisfied Canvas users at SJSU.</p>
      <button>Visit Page</button>
    </div>
  </div>
  <div class="card card-gray-on-white">
    <div class="content">
      <h3>Key Dates</h3>
      <img src='http://www.bates.edu/wp-content/themes/b/home3/im/icon-calendar-01.svg' width='110px' />
      <p>eCampus organizes workshops for faculties and students.</p>
      <button>View Events</button>
    </div>
  </div>
  <div class="card card-2">
    <div class="content">
      <h3>Canvas Users</h3>
      <div>9876</div>
      <p>Total Canvas user count (includes faculty and students).</p>
      <button>Learn More</button>
    </div>
  </div>
</div>

CSS

.card-white-on-blue,
.card-white-on-blue>*:not(button) {
  background-color: white;
  color: #0055A2;
}

.card-white-on-blue button {
  color: white;
  background-color: #0055A2;
}

.card-blue-on-white,
.card-blue-on-white>*:not(button) {
  color: white;
  background-color: #0055A2;
}

.card-blue-on-white button {
  background-color: white;
  color: #0055A2;
}

.card-white-on-gray,
.card-white-on-gray>*:not(button) {
  background-color: white;
  color: #666666;
}

.card-white-on-gray button {
  color: white;
  background-color: #666666;
}

.card-container {
  padding-bottom: 50px;
}
.card-gray-on-white,
.card-gray-on-white>*:not(button) {
  color: white;
  background-color: #666666;
}

.card-gray-on-white button {
  background-color: white;
  color: #666666;
}

.card {
  display: inline-block;
  width: 100%;
  min-height: 300px;
  max-width: 220px;
  margin-right: 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 0px;
  text-align: center;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  overflow: hidden;
  position: relative;
  vertical-align: top;
}

.card .content {
  position: absolute;
  z-index: 999;
  text-align: center;
  width: 100%;
}

.card .content p {
  padding: 0px 5px;
}
.card::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 99;
  background-image: url(https://c1.staticflickr.com/6/5217/5415507446_e57cbf737a_b.jpg);
  background-size: cover;
  opacity: 0.4;
}
.card.card-2::after {
  background-image: url(https://i.pinimg.com/originals/5e/b5/fe/5eb5fe9ee255239269328a84d2988822.png);
}

.card h3 {
  font-weight: lighter;
}
.card .content>div {
  font-size: 6em;
  font-weight: bold;
  letter-spacing: -1px;
}
.card button {
  font-size: 1.4em;
  padding: 10px 20px;
  margin-bottom: 20px;
  opacity: 1;
  font-weight: lighter;
  letter-spacing: 1px;
}

.card button:hover {
  opacity: 0.8;
}

JavaScript

// Work In progress.. Not the final version
fetch("https://api.rss2json.com/v1/api.json?rss_url=http://events.sjsu.edu/RSSSyndicator.aspx?category=22-109&location=&type=N&binary=Y&keywords=&number=0&ics=Y").then(function(response){
	return response.json();
}).then(function(data) {
	console.log(data.items[0]);
  const event = data.items[1];
  document.querySelector(".card-container").insertAdjacentHTML('beforeend', `\
  <div class='card blue-on-white'>
  	<div class='content'>
  		<h3>Canvas II</h3>
      <div>1</div>
      <p>${event.title.substr(0,Math.min(event.title.lastIndexOf("("), 50))}</p>
      <button onclick='location.href="${event.link}"'>View Event</button>
    </div>
  </div>`);
})