Sadeem

كود مرن للحلول المستقبلية

في سديم ، نؤيد إنشاء تعليمات برمجية قابلة للتكيف وقابلة للصيانة باعتبارها مكونًا أساسيًا لتطوير البرامج بنجاح. يضمن فريق المطورين الخبراء لدينا أن التعليمات البرمجية التي يقومون بصياغتها ليست نظيفة وفعالة فحسب، بل مرنة وقابلة للتطوير أيضًا. يعمل هذا النهج على تمكين الحلول البرمجية الخاصة بك من استيعاب التحسينات والتغييرات المستقبلية بسهولة، مما يعزز طول العمر والقدرة على التكيف في مشهد رقمي دائم التطور. ثق بنا لتقديم حلول برمجية ديناميكية ومواكبة للمستقبل والتي تنمو وتتطور مع أعمالك.

shadow-sm1

shadow

shadow-md

shadow-lg

shadow-xl

shadow-2xl

blur-none

blur-sm

blur-lg

blur-2xl

                        

    <div class="grid grid-cols-2 gap-6">
        <div class="shadow-sm bg-white rounded-lg p-2">
            shadow-sm
        </div>
        <div class="shadow bg-white rounded-lg p-2">
            shadow
        </div>
        <div class="shadow-md bg-white rounded-lg p-2">
            shadow-md
        </div>
        <div class="shadow-lg bg-white rounded-lg p-2">
            shadow-lg
        </div>
        <div class="shadow-xl bg-white rounded-lg p-2">
            shadow-xl
        </div>
        <div class="shadow-2xl bg-white rounded-lg p-2">
            shadow-2xl
        </div>
    </div>

                        
    <div class="bg-white rounded-lg border border-gray-200 w-48 text-gray-900 text-sm font-medium">
        <a href="#" aria-current="true" class="block px-4 py-2 border-b border-gray-200 w-full rounded-t-lg bg-blue-700 text-white cursor-pointer">
            Profile
        </a>
        <a href="#" class="block px-4 py-2 border-b border-gray-200 w-full hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 cursor-pointer">
            Settings
        </a>
        <a href="#" class="block px-4 py-2 border-b border-gray-200 w-full hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 cursor-pointer">
            Emails
        </a>
        <a href="#" class="block px-4 py-2 border-b border-gray-200 w-full hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 cursor-pointer">
            Messages
        </a>
        <a href="#" class="block px-4 py-2 border-b border-gray-200 w-full rounded-b-lg hover:bg-gray-100 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:text-blue-700 cursor-pointer">
            Download
        </a>
    </div>

                        

    <button type="button" class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
        <svg class="-ml-0.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
        </svg>
        Button text
    </button>
    <button type="button" class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
        <svg class="-ml-0.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
        </svg>
        Button text
    </button>
    <button type="button" class="inline-flex items-center gap-x-2 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
        <svg class="-ml-0.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
        </svg>
        Button text
    </button>

                        

    <div class="flex flex-col items-center shrink-0">
        <p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">blur-none</p>
        <div class="relative blur-none">
            <img class="w-24 h-24 object-cover rounded-lg shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=320&amp;q=80">
            <div class="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-lg"></div>
        </div>
    </div>

    <div class="flex flex-col items-center shrink-0">
        <p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">blur-sm</p>
        <div class="relative blur-sm">
            <img class="w-24 h-24 object-cover rounded-lg shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=320&amp;q=80">
            <div class="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-lg"></div>
        </div>
    </div>

    <div class="flex flex-col items-center shrink-0">
        <p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">blur-lg</p>
        <div class="relative blur-lg">
            <img class="w-24 h-24 object-cover rounded-lg shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=320&amp;q=80">
            <div class="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-lg"></div>
        </div>
    </div>

    <div class="flex flex-col items-center shrink-0">
        <p class="font-medium text-sm text-slate-500 font-mono text-center mb-3 dark:text-slate-400">blur-2xl</p>
        <div class="relative blur-2xl">
            <img class="w-24 h-24 object-cover rounded-lg shadow-xl" src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=320&amp;h=320&amp;q=80">
            <div class="absolute inset-0 ring-1 ring-inset ring-black/10 rounded-lg"></div>
        </div>
    </div>

إتقان تطوير البرمجيات

إعطاء الأولوية لتجربة المستخدم

كود مرن للحلول المستقبلية

ابقى على تواصل معنا