List div won't become horizontal with flex using Tailwind CSS with ReactJS - html

Question

I'm trying to create a header with the Title in the center, the logout button at the right, and a horizontal list menu at the bottom.
I'm using Tailwind CSS for styling, but the list won't become horizontal no matter what I throw at it.
import React from 'react'
function Header(props) {
return (
<section className="text-black bg-white">
{/* MAIN TEXT AND USER LOGIN/LOGOUT */}
<div className="flex items-center justify-center p-6">
<h1 className="text-6xl px-3 rounded-md shadow-lg py-1 bg-lmgray">
NEW STREET JOURNAL
</h1>
<div className="absolute right-20 mt-2 px-5 rounded-md shadow-lg py-1 bg-lmgray" >
<p>{props.name}</p>
<button className="border-2 border-solid border-black rounded-md ">Logout</button>
</div>
</div>
{/* NAVBAR */}
<div className="">
<ul>
<li>
Home
</li>
<li>
World
</li>
<li>
India
</li>
<li>
Politics
</li>
<li>
Economy
</li>
<li>
Markets
</li>
<li>
Opinion
</li>
<li>
Real Estate
</li>
</ul>
</div>
</section>
)
}
Header.defaultProps={
title: 'News Feed'
}
export default Header
Where am I going wrong?

Answer 1

Try applying inline display to all the list items, for example:
<li className="inline">
Home
</li>
Alternatively, you can use divs instead of unordered lists, and use flexbox in the parent div as such:
<div className="flex">
<div>
Home
</div>
<div>
World
</div>
<div>
India
</div>
<div>
Politics
</div>
<div>
Economy
</div>
<div>
Markets
</div>
<div>
Opinion
</div>
<div>
Real Estate
</div>
</div>
The second method might be better as it allows you to control the styling from one parent div rather than having to change it for each child.