tailwind에 background image 직접삽입

import React, { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { adminSideTitle } from '../../features/admin/commonAdmin'
import Navbar from './components/common/Navbar'
import Sidebar from './components/common/Sidebar'
const AdminMain = () => {

  const dispatch = useDispatch()
  useEffect(()=>{
    dispatch(adminSideTitle("home"))
  },[])
  return (
    <div className='w-full h-screen'>
      <Sidebar/>
      <Navbar/>
      <section className='pt-[120px] pb-[60px]'>
        <div className={'border-b  h-[500px] px-12 py-8 flex justify-end items-left flex-col '+
        "bg-[url('../public/images/photos/sampleimage.jpg')]"}
        >
            <h1 className='text-2xl font-semibold'>this is the recent title</h1>
            <h2>this is the subtitle. the first row</h2>
            <h2>this is the subtitle. and the second row </h2>

        </div>
      </section>
    </div>
  )
}

export default AdminMain