開始前需要先安裝axios

npm install axios

使用tailwind，它非常的方便，很推薦使用，但要注意tailwind它的預設是沒有加前墜的，要用它最好搭配cli或其他預處理器

範例

import React, {useState,useEffect} from 'react';
import Axios from 'axios';
import './tailwind.css';

export default function App() {
  const [text, setText] = useState([]);

useEffect(()=>{
  Axios.get('https://reqres.in/api/users?page=2')
    .then(res => {
      console.log(res)
       setText(res.data.data)
    })
    .catch(err => {
      console.log(err)
    })
},[])

  return (
    <div className="container mx-auto">
      <div className="flex flex-wrap">
        {text.map(post =>(
          <div key={post.id} className="w-1/2 sm:w-1/3">
            <div className="card p-2 sm:p-5">
              <div className="img_bg">
                <img src={post.avatar} alt={post.first_name} title={post.first_name+' '+post.last_name} className="mx-auto"/>
              </div>
              <div className="text_bg p-2 sm:py-8 sm:px-10 ">
                <h1>{post.first_name+' '+post.last_name} </h1>
                <p className="text-xs sm:text-base">email:<br/><span className="text-red-500">{post.email}</span></p>
              </div>
            </div>
          </div>
        ))}

      </div>
    </div>
  )
}

這邊會使用useState&useEffect
useEffect用來get api
useState用來儲存+取值

畫面

api來源 : https://reqres.in/