JSFiddle - React, Tailwind, and code Playground

by waleedbinahmed

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>30 Day Plan</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calendar-wrapper">
  <h1 class="calendar-title">30 Day Plan</h1>
  <div class="calendar-container" id="calendarContainer">
    <!-- Days will be generated by JavaScript -->
  </div>
</div>
<div class="user-stats-container" id="userStatsContainer">
  <h2 class="user-stats-title">NUMBER OF USERS ON DAY 1</h2>
  <div class="user-stats-content">
    <div class="user-count">
      <span class="user-icon">&#128100;</span> <!-- Just a placeholder icon -->
      <span class="count">1.2M</span>
    </div>
    <div class="growth-rate">
      <span class="growth-text">Grow Rate:</span>
      <span class="percentage">15.1%</span>
    </div>
  </div>
  <button class="view-list-btn">View Complete List</button>
</div>
<script src="script.js"></script>
</body>
</html>

CSS

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
  background: #f4f4f4;
}
.calendar-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 10px;
  max-width: 350px;
  margin: 40px auto;
  border: 1px solid #ccc; /* Simple border added */
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Subtle shadow for depth */
  background: #fff;
}
.day {
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
  position: relative;
  border-radius: 50%;
  background-color: #D3D3D3;
  cursor: pointer;
  transition: background-color 0.3s;
}
.day::before {
  content: attr(data-day);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.day:hover {
  background-color: #ADD8E6;
}
.day.active {
  background-color: #90EE90;
}
@media (max-width: 768px) {
  .calendar-container {
    grid-template-columns: repeat(3, 1fr);
    max-width: 90%;
    padding: 5px;
  }
  .day {
    padding-top: calc(100% - 10px); /* Adjust for smaller screens */
  }
}
.calendar-wrapper {
  max-width: 350px;
  margin: 40px auto;
}

.calendar-title {
  margin: 0;
  padding: 5px 5px;
  font-size: 24px;
  font-weight: normal;
  text-align: left;
  background: #f4f4f4;
}
.user-stats-container {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
  text-align: center;
  max-width: 350px; /* Match the width of the .calendar-container */
  margin-left: auto;
  margin-right: auto;
}
/* The rest of the CSS from the previous snippet remains the same */

.user-stats-title {
  margin: 0;
  padding-bottom: 20px;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
}

.user-stats-content {
  margin: 20px 0;
}

.user-count {
  font-size: 36px;
  margin-bottom: 10px;
}

.user-icon {
  font-size: 36px;
}

.count {
  font-weight: bold;
}

.growth-rate {
  font-size: 16px;
  color: #4CAF50;
}

.growth-text {
  font-weight:...

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('calendarContainer');
  createCalendarDays(container, 30);

  container.addEventListener('click', function(event) {
    if (event.target.classList.contains('day')) {
      // Remove 'active' class from all days
      container.querySelectorAll('.day').forEach(day => day.classList.remove('active'));
      // Add 'active' class to the clicked day
      event.target.classList.add('active');
    }
  });
});

function createCalendarDays(container, numberOfDays) {
  for (let i = 1; i <= numberOfDays; i++) {
    let day = document.createElement('div');
    day.className = 'day';
    day.setAttribute('data-day', `DAY ${i}`);
    container.appendChild(day);
  }
}