import panel as pn

pn.extension()

css = '''
.bk.panel-widget-box {
  background: #f0f0f0;
  border-radius: 5px;
  border: 1px black solid;
}
'''

pn.extension(raw_css=[css])

pn.Column(
    pn.widgets.FloatSlider(name='Number', margin=(10, 5, 5, 10)),
    pn.widgets.Select(name='Fruit', options=['Apple', 'Orange', 'Pear'], margin=(0, 5, 5, 10)),
    pn.widgets.Button(name='Run', margin=(5, 10, 10, 10)),
css_classes=['panel-widget-box'])

pn.pane.HTML(background='#f307eb', width=100, height=100)

pn.pane.HTML(background='#00aa41', width=100, height=100, loading=True)

pn.pane.Markdown('### A serif Markdown heading', style={'font-family': "serif"})

a = pn.pane.HTML(width=60, height=60, background='green')

b = pn.pane.HTML(width=60, height=60, background='blue', visible=False)

c = pn.pane.HTML(width=60, height=60, background='red')

layout = pn.Row(a, b, c)
controls = pn.Row(*(c.controls(['visible'])[1] for c in layout))
for c in controls:
    c.width = 50

pn.Column(controls, layout)

pn.Row(
    pn.Column(pn.widgets.Button(name='Run', margin=25), background='#f0f0f0'),
    pn.Column(pn.widgets.Button(name='Run', margin=(25, 50)), background='#f0f0f0'),
    pn.Column(pn.widgets.Button(name='Run', margin=(25, 50, 75, 100)), background='#f0f0f0'))

pn.Row(pn.widgets.IntSlider(name='Test'), pn.widgets.IntSlider(align='end'))

pn.GridBox(
    pn.widgets.IntSlider(name='Test'), pn.widgets.IntSlider(align='end'),
    pn.widgets.TextInput(name='Test', width=150), pn.widgets.TextInput(width=150, align=('start', 'end')),
    ncols=2)

pn.Row(
    pn.pane.Markdown('ABCDE', background='#f0f0f0', width=200, height=200),
    pn.pane.PNG('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png', width=200),
    pn.widgets.FloatSlider(width=200))

pn.Row(
    pn.pane.Str(background='#f0f0f0', height=100, sizing_mode='stretch_width'),
    width_policy='max', height=200
)

pn.Column(
    pn.pane.Str(background='#f0f0f0', sizing_mode='stretch_height', width=200),
    height=200
)

pn.Column(
    pn.pane.Str(background='#f0f0f0', sizing_mode='stretch_both'),
    height=200, width_policy='max'
)

pn.Column(
    pn.pane.PNG('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png', sizing_mode='scale_both'),
    height=400, width=500, background='#3f3f3f')

pn.Row(1, pn.Spacer(width=200), 2, pn.Spacer(width=100), 3, pn.Spacer(width=50), 4, pn.Spacer(width=25), 5)

pn.Row(
    pn.layout.HSpacer(), '* Item 1\n* Item2', pn.layout.HSpacer(), '1. First\n2. Second', pn.layout.HSpacer()
)