JSFiddle - React, Tailwind, and code Playground

JavaScript

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import './styles.css';

function App() {
  const [users, setUser] = useState(null);

  const fetchData = async () => {
    const response = await axios.get(
      'https:api/users'
    );

    setUser(response.data);
  };

  return (
    <div className="App">
      <h1>Users list</h1>
      

      {/* Fetch data from API */}
      <div>
        <button className="fetch-button" onClick={fetchData}>
          download users
        </button>
        <br />
      </div>

      {/* Display data from API */}
      <div className="users">
        {users &&
          users.map((user, index) => {
            const cleanedDate = new Date(user.released).toDateString();
            const name = user.firstName;

            return (
              <div className="user" key={index}>
                <h3>user {index + 1}</h3>
                <h2>{user.name}</h2>

                <div className="details">
                  <p>👨id: {user.id}</p>
                  <p>firstName: {user.firstName}</p>
                  <p>lastName: {user.lastName}</p>
                  <p>⏰: {user.dob}</p>
                </div>
              </div>
            );
          })}
      </div>

    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);