JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WordPress Kullanıcı Girişi Kontrolü</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>

    <div class="main-container">
        <div class="content-area">
            <div class="blur-overlay">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
            </div>

            <div class="lock-card">
                <div class="icon-circle">
                    <i class="fa-solid fa-lock"></i>
                </div>
                <h2>Bu İçerik Yalnızca Üyelere Özeldir</h2>
                <p>İçeriğin tamamını görmek ve avantajlardan yararlanmak için lütfen giriş yapın veya kayıt olun.</p>
                <div class="button-group">
                    <a href="#" class="btn btn-login">Giriş Yap</a>
                    <a href="#" class="btn btn-register">Kayıt Ol</a>
                </div>
            </div>
        </div>

        <div class="bottom-banner">
            <h1>WordPress'te Kullanıcı Girişi Kontrol Etme Yöntemleri</h1>
        </div>
    </div>

</body>
</html>

CSS

/* Genel Sıfırlama ve Font Ayarları */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

/* Ana Konteyner (Görsel Oranını Korumak İçin) */
.main-container {
    width: 100%;
    max-width: 900px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* Bulanık Arka Plan ve Uyarı Kartının Olduğu Alan */
.content-area {
    position: relative;
    padding: 60px 40px;
    background: #ffffff;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Arka plandaki yazıları bulanıklaştırma efekti */
.blur-overlay {
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    bottom: 40px;
    color: #ccc;
    user-select: none;
    filter: blur(5px);
    opacity: 0.5;
    line-height: 1.8;
}

/* Uyarı Kartı */
.lock-card {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    max-width: 450px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

/* Kilit İkonu Çemberi */
.icon-circle {
    width: 70px;
    height: 70px;
    background: #e8f0fe;
    color: #1a73e8;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 0 auto 20px;
}

.lock-card h2 {
    color: #1e293b;
    font-size: 22px;
    margin-bottom: 12px;
    font-weight: 700;
}

.lock-card p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom:...