카테고리

구성 요소 소셜 구성 요소

소셜 구성 요소

사회적 상호 작용 및 공유와 관련된 구성 요소

소셜 구성 요소 구성 요소

Tailwind CSS를 사용하여 높은 대비, 반응형 효과 및 어두운 테마 지원으로 대담한 디자인을 보여주는 브루탈리즘 소셜 구성 요소입니다. 사용자 아바타, 소셜 미디어 링크 및 자리 표시자 이미지를 제공합니다.

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Connect With Us</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=1" alt="Profile 1" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">John Doe</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@john_doe</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=2" alt="Profile 2" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Jane Smith</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@jane_smith</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=3" alt="Profile 3" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Alice Johnson</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@alice_j</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=4" alt="Profile 4" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Bob Brown</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@bob_brown</a>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white">Follow Us</h3>
        <div class="flex space-x-4 mt-2">
            <a href="#" class="text-gray-600 dark:text-gray-400">Facebook</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">Twitter</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">Instagram</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">LinkedIn</a>
        </div>
    </div>
</div>

스큐어모피즘 사회적 구성 요소

Skeuomorphism 디자인, 반응형 효과 및 어두운 테마 지원이 있는 소셜 미디어 구성 요소.

미리보기 열기

                <div class="skeuosocial-component bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl p-6 max-w-sm mx-auto">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-700 shadow-md" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    <div class="ml-4">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
      <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
    </div>
  </div>
  <p class="text-gray-700 dark:text-gray-300 mb-4">
    This is a skeuomophic social media component design using Tailwind CSS.
  </p>
  <img class="rounded-lg shadow-md mb-4" src="https://picsum.photos/400/250" alt="Post Image">
  <div class="flex justify-between items-center text-gray-600 dark:text-gray-400">
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.95-4.95a1 1 0 111.414 1.414L10 15.414l-6.364-6.364a1 1 0 111.414-1.414L10 12.586z"></path></svg>
      <span>120 Likes</span>
    </div>
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h10v8H5V6zm1 1v6h8V7H6z"></path></svg>
      <span>Opens</span>
    </div>
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 3a1 1 0 011 1v5a1 1 0 01-2 0V6a1 1 0 011-1zm0 10a1 1 0 100-2 1 1 0 000 2z"></path></svg>
      <span>Share</span>
    </div>
  </div>
</div>

소셜 구성 요소

스큐어모픽 스타일로 디자인된 소셜 컴포넌트 섹션으로, 반응형 효과와 어두운 테마를 지원합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto flex flex-col items-center">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Connect with Us</h2>
    <div class="flex flex-row space-x-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=1" alt="Facebook" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Facebook</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Facebook.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=2" alt="Twitter" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Twitter</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Twitter.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=3" alt="Instagram" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Instagram</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Instagram.</p>
        </div>
    </div>
    <div class="mt-6 flex flex-col items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-16 h-16 mb-2">
        <h4 class="font-semibold text-gray-800 dark:text-white">John Doe</h4>
        <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
    </div>
</div>

소셜 구성 요소

젖빛 유리와 같은 반투명 요소와 흐림 효과, 반응형 효과 및 어두운 테마 지원이 있는 glassmorphism 디자인을 특징으로 하는 웹 구성 요소입니다.

미리보기 열기

                <div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-500">
    <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-80 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center">Connect with Us</h2>
        <div class="flex items-center justify-around flex-wrap mb-4">
            <div class="flex flex-col items-center">
                <img src="https://picsum.photos/80/80?random=1" alt="User Avatar" class="rounded-full mb-2">
                <p class="text-gray-800 dark:text-white">User 1</p>
                <a href="#" class="text-blue-500 hover:underline">Follow</a>
            </div>
            <div class="flex flex-col items-center">
                <img src="https://picsum.photos/80/80?random=2" alt="User Avatar" class="rounded-full mb-2">
                <p class="text-gray-800 dark:text-white">User 2</p>
                <a href="#" class="text-blue-500 hover:underline">Follow</a>
            </div>
            <div class="flex flex-col items-center">
                <img src="https://picsum.photos/80/80?random=3" alt="User Avatar" class="rounded-full mb-2">
                <p class="text-gray-800 dark:text-white">User 3</p>
                <a href="#" class="text-blue-500 hover:underline">Follow</a>
            </div>
        </div>
        <div class="text-center">
            <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300">View More</button>
        </div>
    </div>
</div>