style.css

* {
 box-sizing: border-box;
}

html,
body {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

body {
 font-family: Arial, sans-serif;
 background-color: #e6fdf9;
}

.box-border {
 border: 1px solid #ccc;
 border-radius: 5px;
 padding: 20px;
 background-color: #fff;
 box-shadow: 1px 1px 5px #ccc;
}

.mt-4 {
 margin-top: 24px;
}

.m-4 {
 margin: 24px;
}

.p-2 {
 padding: 12px;
}

.p-4 {
 padding: 32px;
}

.text-lg {
 font-size: 24px;
}

.text-gray-700 {
 color: #646464;
}

.text-gray-500 {
 color: #bdbdbd;
}

.bg-gray-100 {
 background-color: #f5f5f5;
}

.bg-primary-500 {
 background-color: #41b883;
}

.rounded-full {
 border-radius: 9999px;
}

.rounded-lg {
 border-radius: 15px;
}

.px-4 {
 padding-left: 32px;
 padding-right: 32px;
}

.py-4 {
 padding-top: 32px;
 padding-bottom: 32px;
}

.pt-4 {
 padding-top: 32px;
}

.pb-4 {
 padding-bottom: 32px;
}

.inline-block {
 display: inline-block;
}