JSFiddle - React, Tailwind, and code Playground

by cwhong

HTML

<h1>
Hello, World!
</h1>

<div class="display-box ">
Welcome to Web Mapping 2024.
</div>

<div class="display-box ">
Instructor: <a href="https://nyu.edu" target="_blank">Chris Whong</a>
</div>

<img id="instructor-image" class="rounded-corners" src="https://wagner.nyu.edu/files/styles/faculty_profile/public/faculty/headshots/chris-whong.jpg?itok=bsBOUvcm" />

<button class="button-53" role="button">Button 53</button>

CSS

* {
  font-family: sans-serif;
}

h1, h2, h3 {
  font-weight: 300;
}

.display-box {
  background-color: #9fa8fc;
  padding: 12px;
  margin: 18px;
}

.display-box:hover {
  background-color: #9fcffc;
}

#instructor-image {
  height: 100px;
}

.rounded-corners {
   border-radius: 6px;
}

.button-53 {
  background-color: #3DD1E7;
  border: 0 solid #E5E7EB;
  box-sizing: border-box;
  color: #000000;
  display: flex;
  font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 1rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1.75rem;
  padding: .75rem 1.65rem;
  position: relative;
  text-align: center;
  text-decoration: none #000000 solid;
  text-decoration-thickness: auto;
  width: 100%;
  max-width: 460px;
  position: relative;
  cursor: pointer;
  transform: rotate(-2deg);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-53:focus {
  outline: 0;
}

.button-53:after {
  content: '';
  position: absolute;
  border: 1px solid #000000;
  bottom: 4px;
  left: 4px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
}

.button-53:hover:after {
  bottom: 2px;
  left: 2px;
}

JavaScript

$('.button-53').on('click', function() {
  $('body').css('background-color', 'steelblue')
})