Hugging Face's logo

Spaces:
rainbowhunt
/
TN
Running

App Files Community
TN
File size: 4,505 Bytes 
fb33344
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
<!-- Careers in Tamil Nadu Page -->
<div class="min-h-screen flex flex-col bg-white" x-data="{ tab: 'gov' }">
  <!-- Header -->
  <header class="bg-primary text-white">
    <div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
      <h1 class="text-2xl font-bold">TN Medical Connect</h1>
      <nav class="space-x-4 text-sm">
        <a href="#" class="hover:underline">Home</a>
        <a href="#" class="hover:underline font-semibold">Careers</a>
        <a href="#" class="hover:underline">Fellowships</a>
        <!-- ...other nav links -->
      </nav>
    </div>
  </header>

  <!-- Main Content -->
  <main class="flex-1 max-w-7xl mx-auto px-4 py-6">
    <!-- Page Title -->
    <h2 class="text-3xl font-bold text-gray-800 mb-4">💼 Careers in Tamil Nadu</h2>
    <p class="text-gray-600 mb-6">Explore the latest job opportunities in government and private hospitals across Tamil Nadu.</p>

    <!-- Toggle Tabs for Gov/Private -->
    <div class="mb-6">
      <button class="px-4 py-2 text-sm font-medium rounded-t-md focus:outline-none"

              :class="tab === 'gov' ? 'bg-primary text-white' : 'bg-gray-200 text-gray-600'" 

              @click="tab = 'gov'">Government Jobs</button>
      <button class="px-4 py-2 text-sm font-medium rounded-t-md focus:outline-none"

              :class="tab === 'private' ? 'bg-primary text-white' : 'bg-gray-200 text-gray-600'" 

              @click="tab = 'private'">Private Jobs</button>
    </div>

    <!-- Government Jobs List -->
    <div x-show="tab === 'gov'">
      <!-- Example job listing -->
      <div class="p-4 mb-4 bg-gray-50 border border-gray-200 rounded-lg flex flex-col md:flex-row md:justify-between md:items-center">
        <div>
          <h3 class="text-lg font-semibold text-gray-800">Junior Resident – Madurai Medical College</h3>
          <p class="text-sm text-gray-600">Madurai, TN &middot; Posted Jan 2025</p>
        </div>
        <a href="#" class="mt-2 md:mt-0 inline-block bg-primary text-white text-sm font-medium px-4 py-2 rounded hover:bg-opacity-90">View Details</a>
      </div>
      <div class="p-4 mb-4 bg-gray-50 border border-gray-200 rounded-lg flex flex-col md:flex-row md:justify-between md:items-center">
        <div>
          <h3 class="text-lg font-semibold text-gray-800">Assistant Surgeon – Govt. General Hospital</h3>
          <p class="text-sm text-gray-600">Chennai, TN &middot; Posted Dec 2024</p>
        </div>
        <a href="#" class="mt-2 md:mt-0 inline-block bg-primary text-white text-sm font-medium px-4 py-2 rounded hover:bg-opacity-90">View Details</a>
      </div>
      <!-- More government job cards... -->
      <p class="text-sm text-gray-500">Showing Government hospital openings. (Total: 12 jobs)</p>
    </div>

    <!-- Private Jobs List -->
    <div x-show="tab === 'private'">
      <div class="p-4 mb-4 bg-gray-50 border border-gray-200 rounded-lg flex flex-col md:flex-row md:justify-between md:items-center">
        <div>
          <h3 class="text-lg font-semibold text-gray-800">Senior Resident – CMC Vellore</h3>
          <p class="text-sm text-gray-600">Vellore, TN &middot; Posted Jan 2025</p>
        </div>
        <a href="#" class="mt-2 md:mt-0 inline-block bg-primary text-white text-sm font-medium px-4 py-2 rounded hover:bg-opacity-90">View Details</a>
      </div>
      <div class="p-4 mb-4 bg-gray-50 border border-gray-200 rounded-lg flex flex-col md:flex-row md:justify-between md:items-center">
        <div>
          <h3 class="text-lg font-semibold text-gray-800">Consultant Cardiologist – Apollo Hospitals</h3>
          <p class="text-sm text-gray-600">Chennai, TN &middot; Posted Dec 2024</p>
        </div>
        <a href="#" class="mt-2 md:mt-0 inline-block bg-primary text-white text-sm font-medium px-4 py-2 rounded hover:bg-opacity-90">View Details</a>
      </div>
      <!-- More private job cards... -->
      <p class="text-sm text-gray-500">Showing Private sector openings. (Total: 8 jobs)</p>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-gray-100">
    <div class="max-w-7xl mx-auto px-4 py-5 text-sm text-gray-600">
      © 2025 TN Medical Connect &middot; <a href="#" class="text-primary hover:underline">Advertise Jobs</a>
    </div>
  </footer>
</div>

<!-- Include Alpine.js for tab functionality (if not already globally included) -->
<script src="https://unpkg.com/alpinejs" defer></script>