HTML Templates (Tailwinds.css)
?
S
MarkupTemplate for a simple queue with 2 operators
1<body class="h-screen flex items-center justify-center bg-gray-100">
2 <div class="bg-white rounded-lg shadow-lg p-10">
3 <h1 class="text-4xl mb-6 text-center">Realtime Call Queue</h1>
4
5 <div class="mb-10 p-4 bg-gray-50 rounded-lg shadow">
6 <h2 class="text-2xl mb-4 text-center">Calls in Queue</h2>
7 <ul class="space-y-4">
8 <li class="bg-white rounded shadow p-4">Call 1 (Points: 5)</li>
9 <li class="bg-white rounded shadow p-4">Call 2 (Points: 7)</li>
10 <li class="bg-white rounded shadow p-4">Call 3 (Points: 10)</li>
11 </ul>
12 </div>
13
14 <div class="p-4 bg-gray-50 rounded-lg shadow">
15 <h2 class="text-2xl mb-4 text-center">Operators</h2>
16 <div class="flex justify-center space-x-4">
17 <div class="bg-white rounded-lg shadow p-4 w-1/3">
18 <h3 class="text-center mb-4">Operator 1</h3>
19 <div class="flex justify-center">
20 <button class="px-4 py-2 bg-green-500 text-white rounded">Available</button>
21 </div>
22 </div>
23 <div class="bg-white rounded-lg shadow p-4 w-1/3">
24 <h3 class="text-center mb-4">Operator 2</h3>
25 <div class="flex justify-center">
26 <button class="px-4 py-2 bg-red-500 text-white rounded">Unavailable</button>
27 </div>
28 </div>
29 </div>
30 </div>
31 </div>
32</body>
33
34
35
36<-- Pitch Analyzer -->
37<body class="bg-gray-100 p-8">
38 <!-- Header -->
39 <header class="bg-gradient-to-r from-blue-500 to-teal-500 p-6 rounded-lg shadow-md mb-8">
40 <h1 class="text-white text-3xl font-bold text-center">Sales Pitch Analyzer</h1>
41 </header>
42
43 <!-- Card Section -->
44 <div class="grid grid-cols-4 gap-4 mb-8">
45<div class="bg-white shadow-lg rounded-lg p-6 overflow-hidden cursor-pointer">
46 <h2 class="font-bold text-lg mb-4">Card 1</h2>
47 <div class="border border-gray-300 w-full aspect-[210/297] bg-gray-100 flex items-center justify-center">
48 <p class="text-gray-500">Preview of A4 Page</p>
49 </div>
50 <p class="mt-4">Description of Card 1</p>
51</div>
52<div class="bg-white shadow-lg rounded-lg p-6 overflow-hidden cursor-pointer">
53 <h2 class="font-bold text-lg mb-4">Card 1</h2>
54 <div class="border border-gray-300 w-full aspect-[210/297] bg-gray-100 flex items-center justify-center">
55 <p class="text-gray-500">Preview of A4 Page</p>
56 </div>
57 <p class="mt-4">Description of Card 1</p>
58</div>
59 <div class="bg-white shadow-lg rounded-lg p-6 overflow-hidden cursor-pointer">
60 <h2 class="font-bold text-lg mb-4">Card 1</h2>
61 <div class="border border-gray-300 w-full aspect-[210/297] bg-gray-100 flex items-center justify-center">
62 <p class="text-gray-500">Preview of A4 Page</p>
63 </div>
64 <p class="mt-4">Description of Card 1</p>
65</div>
66 <div class="bg-white shadow-lg rounded-lg p-6 overflow-hidden cursor-pointer">
67 <h2 class="font-bold text-lg mb-4">Card 1</h2>
68 <div class="border border-gray-300 w-full aspect-[210/297] bg-gray-100 flex items-center justify-center">
69 <p class="text-gray-500">Preview of A4 Page</p>
70 </div>
71 <p class="mt-4">Description of Card 1</p>
72</div>
73 </div>
74
75 <!-- Upload Form -->
76 <div class="bg-white shadow-lg rounded-lg p-6 mb-8">
77 <h2 class="font-bold text-lg mb-4">Upload Sales Pitch</h2>
78 <form>
79 <input type="file" class="block w-full text-sm text-gray-900 border rounded-lg cursor-pointer p-2.5">
80 <button type="submit" class="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-700">Upload</button>
81 </form>
82 </div>
83
84 <!-- Results Board -->
85 <div class="bg-white shadow-lg rounded-lg p-6">
86 <h2 class="font-bold text-lg mb-4">Results</h2>
87 <ul>
88 <li class="flex items-center mb-2">
89 <svg class="w-6 h-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
90 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
91 </svg>
92 <span class="ml-2">Item 1 (Good)</span>
93 </li>
94 <li class="flex items-center mb-2">
95 <svg class="w-6 h-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
96 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
97 </svg>
98 <span class="ml-2">Item 2 (Needs improvement)</span>
99 </li>
100 <!-- Add more items as needed -->
101 </ul>
102 </div>
103</body>Created on 7/13/2023