我正在使用Tailwind CSS制作我的頁(yè)面，我停留在了出版物頁(yè)面上。我想要這樣的東西。

我試著用順風(fēng)CSS做，但是不能完全得到它。

const abstractButton = document.getElementById('abstract-button');
const closeButton = document.getElementById('close-button');
const abstractPopup = document.getElementById('abstract-popup');

abstractButton.addEventListener('click', () => {
    abstractPopup.classList.remove('hidden');
});

closeButton.addEventListener('click', () => {
    abstractPopup.classList.add('hidden');
});

<link  rel="stylesheet"/>
<div class="flex flex-col h-screen">    
    <div class="flex flex-row justify-center items-center my-4">
    <div class="mr-8 h-60 w-60">
        <img src="https://via.placeholder.com/150" alt="Journal of Algebra" class="w-36 h-auto">
    </div>
    <div>
        <p class="mb-4 text-lg">
            The image of polynomials and Waring type problems on upper triangular matrix algebras
        </p>
        <p class="mb-4">
            <span class="authors">Authors: </span><strong>Sachchidanand Prasad</strong>, Saikat Panja and Navnath Daundkar
        </p>
        <div class="flex space-x-4 items-center my-2">
            <div class="border rounded-lg border-gray-600 p-1">
            <a  target="_blank" class="text-blue-500 hover:text-blue-800">arXiv</a>
            </div>
            <div class="border rounded-lg border-gray-600 p-1">
            <a href="link-to-journal" target="_blank" class="text-blue-500 hover:text-blue-800">Journal</a>
            </div>
            <div class="border rounded-lg border-gray-600 p-1">
            <a href="link-to-pdf" target="_blank" class="text-blue-500 hover:text-blue-800">PDF</a>
            </div>
        </div>
        <button class="mt-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700" id="abstract-button">Abstract</button>
    </div>
    </div>
    
    <!-- Abstract Popup -->
    <div id="abstract-popup" class="fixed inset-0 flex items-center justify-center hidden">
    <div class="absolute bg-white rounded-lg p-8 w-1/2">
        <h2 class="text-xl font-bold mb-4">Abstract</h2>
        <p class="text-gray-800">
        This is the abstract of your paper. It provides a concise summary of your research, highlighting the main objectives, methods, and findings. You can customize this section with your own abstract content.
        </p>
        <button class="mt-6 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700" id="close-button">Close</button>
    </div>
</div>