JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Генератор URL и Sitemap</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen py-10 px-4">

    <div class="max-w-4xl mx-auto bg-white shadow-md rounded-lg p-6">
        <h1 class="text-2xl font-bold mb-4 text-gray-900">Генератор URL и Sitemap из списка доменов</h1>
        
        <div class="mb-4">
            <label for="domainsInput" class="block text-sm font-medium text-gray-700 mb-2">
                Введите домены (каждый с новой строки):
            </label>
            <textarea 
                id="domainsInput" 
                rows="5" 
                class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none font-mono text-sm"
                placeholder="example.com&#10;site.ru&#10;test.org"
            ></textarea>
        </div>

        <button 
            id="generateBtn" 
            class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-200 shadow"
        >
            Сгенерировать таблицу
        </button>

        <div id="resultContainer" class="mt-6 overflow-x-auto hidden">
            <table class="w-full border-collapse border border-gray-200 text-left text-sm">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="border border-gray-200 p-3 w-1/4">Исходный домен</th>
                        <th class="border border-gray-200 p-3 w-3/8">Основной URL (HTTPS)</th>
                        <th class="border border-gray-200 p-3 w-3/8">URL Sitemap</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    </tbody>
            </table>
        </div>
    </div>

    <script>
       ...