JSFiddle - React, Tailwind, and code Playground

by moku23

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OFP Leaderboard</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container-fluid">
    <table class="table d-none d-md-table">
        <thead>
        <tr>
            <th>Rank</th>
            <th>Name</th>
            <th >Currency</th>
            <th>Initial Balance</th>
            <th>Current Balance</th>
            <th >Profit</th>
            <th>Profit %</th>
        </tr>
        </thead>
        <tbody>
        {% for user in users %}
        <tr>
            <td>{{ loop.index }}</td>
            <td>{{ user.firstName.title() }} {{ user.lastName[:1].title() }}.</td>
            <td>{{ user.currency }}</td>
            <td>{{ user.initial_balance|format_currency(user.currency) }}</td>
            <td>{{ user.balance|format_currency(user.currency) }}</td>
            <td>{{ user.profit|format_currency(user.currency) }}</td>
            <td>{{ "{:.2f}".format(100*user.profit/user.initial_balance) }} %</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    <div class="d-block d-md-none">
        {% for user in users %}
        <div class="card mt-2">
            <div class="card-body">
              <h5 class="card-title text-center">{{loop.index}}</h5>
              <h6 class="card-subtitle mb-2 text-body-secondary fs-3 text-center">{{ user.firstName.title() }} {{ user.lastName[:1].title() }}.</h6>
              <p class="card-text">Currency: {{ user.currency }}</p>
              <p...

CSS

body {
  font-family: Heebo, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #f25430;
  font-size: 2rem;
  margin-bottom: 30px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  border-radius: 10px;
  background-color: #f0f0f0; /* Grigio chiaro */
}

th {
  background-color: #f25430;
  color: white;
  font-weight: bold;
  padding: 10px;
  border-bottom: 2px solid #454545;
}

td {
  padding: 10px;
  border-top: 1px solid #454545;
  color: white;
}

tr:nth-child(even) {
  background-color: #c24f35; /* Viola intenso, scuro */
}

tr:nth-child(odd) {
  background-color:rgba(69, 69, 69, 0.84) /* Rosa acceso, fluo */
}

tr:hover {
  background-color: rgba(242, 84, 48, 0.2);
}

.rank {
  text-align: center;
}

.name {
  text-align: left;
}

.profit {
  text-align: right;
}

.profit-factor {
  text-align: right;
}

.profile-picture {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.name {
  text-align: left;
  font-weight: bold;
  text-transform: capitalize;
}

.card:nth-child(even) {
  background-color: #FF8555; /* Viola intenso, scuro */
  color:white
}

.card:nth-child(odd) {
  background-color: rgba(69, 69, 69, 0.84); /* Rosa acceso, fluo */
  color:white
}

p{
  margin: 0;
}

/* Add palette colors */

.card:nth-child(even) {
  background-color: #c24f35; /* Viola intenso, scuro */
  color:white
}

.card:nth-child(odd) {
  background-color: rgba(69, 69, 69, 0.84); /* Rosa acceso, fluo */
  color:white
}

.card:nth-child(even) th {
  background-color: #454545; /* grey */
}

.card:nth-child(odd) th {
  background-color: #c24f35; /* orange */
}

.card:nth-child(even) td {
  color: #a6a7a9; /* light grey */
}

.card:nth-child(odd) td {
  color: #a6a7a9; /* light grey */
}