JSFiddle - React, Tailwind, and code Playground

by dtkav

HTML

<div class ="gcal-schedule-container" bind:clientWidth={containerWidth}>
            <div class="gcal-schedule-day-container gcal-schedule-breakLine">
                <div class="gcal-schedule-date-display">
                    <div                
                    class="gcal-schedule-day-circle today"
                    style="display: flex; flex-direction: column;"
                    >
                        <span class="gcal-schedule-month-text">09</span>
                        <span class="gcal-schedule-day-number">19</span>
                    </div>
                    <span class="gcal-schedule-day-text">Tuesday</span>
                </div>
               
                <div class="gcal-schedule-event-container">
                    <div class="gcal-schedule-event">
                        <div class="gcal-schedule-event-info">
                                <div class="gcal-schedule-circle-container-recurring">
                                    <div class="gcal-schedule-event-circle" style:background="red"></div>
                                </div>
                                <div class="gcal-schedule-time-container">
                                    <span>3:30</span>
                                </div>
                    </div>
                        <div class="gcal-schedule-event-title-container">
                            <span class="gcal-schedule-event-title">Obsidian Hax</span>
                        </div>   
                    </div>
                </div>
                <div class="gcal-schedule-event-container">
                    <div class="gcal-schedule-event">
                        <div class="gcal-schedule-event-info">
                                <div class="gcal-schedule-circle-container">
                                    <div class="gcal-schedule-event-circle" style:background="red"></div>
                                </div>
                                <div...

CSS

.gcal-schedule-day-container {
		display: flex;
        flex-direction: row;
		align-items: flex-start;
		border-bottom: 1px solid gray;
		margin: 2px 0px;
		padding: 2px 0px;
        width: 100%
	}

	.gcal-schedule-date-display {
		display: flex;
		flex-direction: row;
		align-items: center;
        gap: 5px;
        padding: 0px;
	}

	.gcal-schedule-day-circle {
		border-radius: 50%;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		display: inline-block;
        border: solid 1px gray;
        min-height: 40px;
		min-width: 40px;
        width: 50px;
        height: 50px;
		cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
	}

	.today {
		color: white;
		background: #4285f4;
		text-decoration: none;
	}

    .gcal-schedule-month-text {
        font-size: small;
    }

    .gcal-schedule-day-number {
        font-size: large;
        font-weight: 700;
    }

	.gcal-schedule-day-text {
        min-width: 30px;
		font-size: medium;
	}

	.gcal-schedule-event-container {
		display: flex;
		flex-direction: column;
        overflow: hidden;
        width: 100%;
	}
 
	.gcal-schedule-event {
		display: flex;
		padding: 5px;
		border-radius: 10px;
		cursor: pointer;
	}

	.gcal-schedule-event:hover {
		background-color: rgba(128, 128, 128, 0.129);
	}

    .gcal-schedule-event-info{
        display: flex;
        align-items: center;
    }

	.gcal-schedule-circle-container-recurring,
	.gcal-schedule-circle-container {
		position: relative;
		display: flex;
		min-width: 30px;
		height: 30px;
		align-items: center;
		justify-content: center;
	}

	.gcal-schedule-circle-container-recurring::after {
		content: "↺";
		position: absolute;
		width: 30px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		font-size: 30px;
		color: rgb(164, 164, 164);
		white-space: nowrap;
	}

	.gcal-schedule-event-circle {
		width: 10px;
		min-width: 10px;
		height: 10px;
		border-radius:...